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

Vimeo Design System

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

var size = 18;
var CounterIcon = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: inline-block;\n"], ["\n  display: inline-block;\n"])));
var Icon = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"], ["\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  width: ", ";\n  height: ", ";\n\n  svg {\n    width: ", ";\n    height: ", ";\n\n    * {\n      fill: ", ";\n    }\n  }\n"])), rem(5), rem(4), rem(size), rem(size), rem(size), rem(size), function (_a) {
    var theme = _a.theme;
    return theme.formats.soft;
});
var Content = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: inline-block;\n  position: relative;\n  padding: ", " ", " ", " ", ";\n  color: ", ";\n  border: 0;\n  border-radius: ", ";\n  background: transparent;\n  transition: 100ms ease-in-out;\n  text-align: center;\n  vertical-align: middle;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  ", ";\n\n  ", ":hover & {\n    background-color: ", ";\n  }\n"], ["\n  display: inline-block;\n  position: relative;\n  padding: ", " ", " ", " ", ";\n  color: ", ";\n  border: 0;\n  border-radius: ", ";\n  background: transparent;\n  transition: 100ms ease-in-out;\n  text-align: center;\n  vertical-align: middle;\n  appearance: none;\n  align-items: center;\n  justify-content: center;\n  ", ";\n\n  ", ":hover & {\n    background-color: ", ";\n  }\n"])), rem(4), rem(4), rem(4), rem(size + 10), function (_a) {
    var theme = _a.theme;
    return theme.formats.soft;
}, rem(3), antialias, CounterIcon, rgba(162, 175, 184, 0.16));
var templateObject_1, templateObject_2, templateObject_3;

export { Content, CounterIcon, Icon };