@vimeo/iris/typography/Link/Link.style.esm.js

Vimeo Design System

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

var Link = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), function (_a) {
    var variant = _a.variant, theme = _a.theme, format = _a.format;
    if (!format || !theme.formats[format])
        format = 'primary';
    var color = theme.formats[format];
    var hoverColor = tint(0.15, color);
    return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      color: ", ";\n      display: inline;\n      position: relative;\n      padding: 0;\n      font-size: inherit;\n      line-height: inherit;\n      text-decoration: none;\n      border: 0;\n      background-color: transparent;\n      transition: all 0.1s ease-in-out;\n      appearance: none;\n      cursor: pointer;\n\n      &:hover {\n        color: ", ";\n      }\n\n      &::-moz-focus-inner {\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      &:active {\n        cursor: wait;\n      }\n\n      ", "\n    "], ["\n      color: ", ";\n      display: inline;\n      position: relative;\n      padding: 0;\n      font-size: inherit;\n      line-height: inherit;\n      text-decoration: none;\n      border: 0;\n      background-color: transparent;\n      transition: all 0.1s ease-in-out;\n      appearance: none;\n      cursor: pointer;\n\n      &:hover {\n        color: ", ";\n      }\n\n      &::-moz-focus-inner {\n        margin: 0;\n        padding: 0;\n        border: 0;\n      }\n\n      &:active {\n        cursor: wait;\n      }\n\n      ", "\n    "])), color, hoverColor, variant !== 'minimal' && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n        &::after {\n          display: block;\n          position: absolute;\n          bottom: ", ";\n          left: 0;\n          width: 100%;\n          height: 1em;\n          margin-top: ", ";\n          border-bottom: ", " solid currentColor;\n          content: '';\n        }\n      "], ["\n        &::after {\n          display: block;\n          position: absolute;\n          bottom: ", ";\n          left: 0;\n          width: 100%;\n          height: 1em;\n          margin-top: ", ";\n          border-bottom: ", " solid currentColor;\n          content: '';\n        }\n      "])), rem(-2), rem(10), rem(1)));
});
var templateObject_1, templateObject_2, templateObject_3;

export { Link };