@vimeo/iris/components/PopOver/PopOver.style.esm.js

Vimeo Design System

import { a as __makeTemplateObject } from '../../tslib.es6-7f0e734f.js';
import styled, { keyframes, css } from 'styled-components';
import { rgba, rem } from 'polished';

var fadeIn = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  0% {\n    transform: translateY(-0.25rem) scale(0.98);\n    opacity: 0;\n\n  }\n\n  100% {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"], ["\n  0% {\n    transform: translateY(-0.25rem) scale(0.98);\n    opacity: 0;\n\n  }\n\n  100% {\n    transform: translateY(0) scale(1);\n    opacity: 1;\n  }\n"])));
var PopOverStyled = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background: ", ";\n  min-width: 10rem;\n  min-height: 2rem;\n  max-width: 40rem;\n  border-radius: 0.25rem;\n  animation: ", " 150ms ease-in-out;\n\n  ", ";\n"], ["\n  background: ", ";\n  min-width: 10rem;\n  min-height: 2rem;\n  max-width: 40rem;\n  border-radius: 0.25rem;\n  animation: ", " 150ms ease-in-out;\n\n  ", ";\n"])), function (_a) {
    var theme = _a.theme;
    return theme.content.background;
}, fadeIn, function (p) {
    return p.theme.name === 'dark'
        ? css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n          border: 1px solid ", ";\n        "], ["\n          border: 1px solid ", ";\n        "])), rgba(255, 255, 255, 0.125)) : css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n          box-shadow: 0 0 ", " 0 rgba(0, 0, 0, 0.15),\n            0 ", " ", " 0 rgba(0, 0, 0, 0.15);\n        "], ["\n          box-shadow: 0 0 ", " 0 rgba(0, 0, 0, 0.15),\n            0 ", " ", " 0 rgba(0, 0, 0, 0.15);\n        "])), rem(1), rem(4), rem(8));
});
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;

export { PopOverStyled };