"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = exports.Typography = exports.typography = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _styledComponents = require("styled-components");

var _templateObject, _templateObject2;

var typography = function typography(conf) {
  var config = conf.theme;
  return (0, _styledComponents.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n    /* APPLICABLE TO ALL SIZES */\n    * {\n      &[data-variant='secondary'] {\n        color: ", ";\n      }\n      &[data-variant='hint'] {\n        color: ", ";\n      }\n      &[data-variant='disabled'] {\n        color: ", ";\n        cursor: not-allowed;\n      }\n    }\n\n    h1,\n    h2,\n    h3,\n    h4,\n    h5,\n    h6 {\n      font-weight: 500;\n    }\n\n    button,\n    [data-btn] {\n      font-size: 1.6rem;\n      font-weight: 500;\n      cursor: pointer;\n      position: relative;\n      border: 0.1rem solid;\n      display: inline-block;\n      transition: all 0.15s ease;\n      min-height: 4.7rem;\n      text-align: center;\n      line-height: 2.8rem;\n\n      padding: ", "rem\n        ", "rem;\n\n      border-radius: ", "rem;\n\n      &[data-small] {\n        min-height: 3.2rem;\n        padding: 0.6rem 1.5rem;\n        font-size: 1.2rem;\n        line-height: 1;\n        font-weight: 500;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      &[data-variant='primary'] {\n        background: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &[data-bordered] {\n          color: ", ";\n        }\n\n        &:hover:not([disabled]) {\n          background: ", ";\n          border-color: ", ";\n        }\n      }\n\n      &[data-variant='secondary'] {\n        background: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &[data-bordered] {\n          color: ", ";\n        }\n\n        &:hover:not([disabled]) {\n          background: ", ";\n          border-color: ", ";\n        }\n      }\n\n      &[data-variant='light'] {\n        background: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &:hover:not([disabled]) {\n          background: ", ";\n          border-color: ", ";\n        }\n      }\n\n      &[data-variant='grey'] {\n        background: ", ";\n        color: ", ";\n        border-color: ", ";\n\n        &[data-bordered] {\n          background: transparent;\n\n          &:hover:not([disabled]) {\n            background: transparent !important;\n            border-color: ", ";\n          }\n        }\n\n        &[disabled] {\n          color: ", ";\n        }\n\n        &:hover:not([disabled]) {\n          background: ", " !important;\n          border-color: ", ";\n        }\n      }\n\n      &[data-variant='disabled'] {\n        background: ", ";\n        border-color: ", ";\n        color: ", ";\n        opacity: 0.7;\n\n        &[data-bordered] {\n          color: ", ";\n        }\n      }\n\n      &[data-bordered] {\n        background: transparent;\n\n        &:hover:not([disabled]) {\n          background: ", ";\n        }\n      }\n\n      &[data-fullwidth] {\n        width: 100%;\n        display: block;\n        padding: 1.1rem 2rem 1rem;\n        font-size: 16px;\n      }\n    }\n\n    [data-border-radius='small'] {\n      border-radius: 0.4rem;\n    }\n\n    [data-border-radius='normal'] {\n      border-radius: ", "rem;\n    }\n\n    [data-border-radius='large'] {\n      border-radius: ", "rem;\n    }\n\n    [data-border-radius='circle'] {\n      border-radius: 50%;\n    }\n\n    [data-border-radius='none'] {\n      border-radius: 0;\n    }\n\n    [disabled] {\n      cursor: default;\n\n      &[data-cross-over] {\n        overflow: hidden;\n        background-image: linear-gradient(\n          to right bottom,\n          transparent calc(50% - 1px),\n          ", " calc(50% - 1px),\n          ", " 50%,\n          transparent 50%\n        ) !important;\n      }\n    }\n\n    body {\n      color: ", ";\n      font-size: ", ";\n      line-height: ", ";\n    }\n\n    /* BASE STYLES FOR MOBILE AND UP */\n    h1 {\n      font-size: 3.2rem;\n      line-height: 1.125;\n    }\n\n    h2 {\n      font-size: 2.8rem;\n      line-height: 1.428571;\n    }\n\n    h3 {\n      font-size: 2.4rem;\n      line-height: 1.6667;\n    }\n\n    h4 {\n      font-size: 20px;\n      line-height: 1.2;\n    }\n\n    h5 {\n      font-size: 1.6rem;\n      line-height: 1.5;\n    }\n\n    h6 {\n      font-size: 1.4rem;\n    }\n\n    a {\n      font-size: inherit;\n      text-decoration: none;\n    }\n\n    p {\n      font-size: 1.6rem;\n    }\n\n    @media (min-width: ", ") {\n      /* BASE STYLES FOR SMALL AND UP - EXTEND ONLY IF YOU NEED TO */\n    }\n    @media (min-width: ", ") {\n      /* BASE STYLES FOR MEDIUM AND UP - EXTEND ONLY IF YOU NEED TO */\n    }\n    @media (min-width: ", ") {\n      /* BASE STYLES FOR LARGE AND UP - EXTEND ONLY IF YOU NEED TO */\n    }\n    @media (min-width: ", ") {\n      /* BASE STYLES FOR X-LARGE AND UP - EXTEND ONLY IF YOU NEED TO */\n    }\n    @media (min-width: ", ") {\n      /* BASE STYLES FOR XX-LARGE AND UP - EXTEND ONLY IF YOU NEED TO */\n    }\n  "])), config.palette.secondary, config.palette.hint, config.palette.disabled, config.spacingBaseUnit * 0.5, config.spacingBaseUnit * 1.75, config.elementsBorderRadius, config.palette.primary, config.palette.secondary, config.palette.primary, config.palette.primary, config.palette.hint, config.palette.hint, config.palette.secondary, config.palette.primary, config.palette.secondary, config.palette.secondary, config.palette.light, config.palette.light, config.palette.light, config.palette.primary, config.palette.light, config.palette.hint, config.palette.hint, config.palette.grey, config.palette.primary, config.palette.grey, config.palette.primary, config.palette.grey, config.palette.hint, config.palette.primary, config.palette.disabled, config.palette.disabled, config.palette.primary, config.palette.disabled, config.palette.light, config.elementsBorderRadius, config.elementsBorderRadius * 1.5, config.palette.grey, config.palette.grey, config.palette.primary, config.typography.defaultSize, config.typography.defaultLineHeight, config.breakpoints.sm.min, config.breakpoints.md.min, config.breakpoints.lg.min, config.breakpoints.xl.min, config.breakpoints.xxl.min);
};

exports.typography = typography;
var Typography = (0, _styledComponents.createGlobalStyle)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["", ""])), typography);
exports.Typography = Typography;
var _default = typography;
exports["default"] = _default;
//# sourceMappingURL=typography.js.map