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

Vimeo Design System

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

var Nav = styled.ol(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  width: 100%;\n  margin: 0 0 0.25rem;\n  padding: 0;\n  list-style-type: none;\n  border-radius: ", ";\n\n  ", ";\n"], ["\n  display: flex;\n  width: 100%;\n  margin: 0 0 0.25rem;\n  padding: 0;\n  list-style-type: none;\n  border-radius: ", ";\n\n  ", ";\n"])), function (p) { return (p.pill ? '2rem' : '0.25rem'); }, variant);
function variant(_a) {
    var _b = _a.variant, variant = _b === void 0 ? 'minimalTransparent' : _b;
    return (variant === 'inlay' && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n      background: ", ";\n      padding: 0.334rem 0;\n    "], ["\n      background: ", ";\n      padding: 0.334rem 0;\n    "])), function (p) { return p.theme.formats.secondary; }));
}
var Indicator = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 100%;\n  background: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    width: ", "%;\n    height: ", ";\n    background-color: ", ";\n    transform: translateX(", "%);\n    transition: 120ms ease-in-out;\n  }\n"], ["\n  width: 100%;\n  background: ", ";\n\n  &:after {\n    content: '';\n    display: block;\n    width: ", "%;\n    height: ", ";\n    background-color: ", ";\n    transform: translateX(", "%);\n    transition: 120ms ease-in-out;\n  }\n"])), function (p) { return rgba(p.theme.content.color, 0.1); }, function (p) { return 100 / p.width; }, rem(2), blue(500), function (p) { return p.position * 100; });
var templateObject_1, templateObject_2, templateObject_3;

export { Indicator, Nav };