suomifi-ui-components/dist/cjs/core/Tooltip/TooltipContent/TooltipContent.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');

var baseStyles = function baseStyles(arrowOffsetPx, theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  ", ";\n\n  &.fi-tooltip_content {\n    margin: 10px 0;\n    position: relative;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    padding: 20px 43px 20px 20px;\n    box-shadow: ", ";\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      height: 0;\n      width: 0;\n      border: solid transparent;\n      pointer-events: none;\n    }\n    &:before {\n      border-bottom-color: ", ";\n      border-width: 9px;\n      left: ", "px;\n      margin-right: -9px;\n      bottom: 100%;\n    }\n    &:after {\n      border-bottom-color: ", ";\n      border-width: 8px;\n      margin-right: -9px;\n      bottom: 100%;\n      left: calc(", "px + 1px);\n    }\n\n    &.fi-tooltip_content--arrow-hidden {\n      &:before,\n      &:after {\n        display: none;\n      }\n    }\n\n    & .fi-tooltip_close-button {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      height: 40px;\n      width: 40px;\n      padding: 12px;\n      border-radius: ", ";\n      & .fi-tooltip_close-button_icon {\n        width: 16px;\n        height: 16px;\n      }\n      &:active {\n        background: ", ";\n      }\n      &:focus-visible {\n        ", " /* For hight contrast mode */\n        &:after {\n          ", "\n        }\n      }\n      &:hover {\n        outline: 1px solid ", ";\n      }\n    }\n    & .fi-heading {\n      margin-bottom: 10px;\n      margin-top: 0;\n    }\n    & .fi-text {\n      ", "\n    }\n  }\n"], ["\n  ", ";\n\n  &.fi-tooltip_content {\n    margin: 10px 0;\n    position: relative;\n    border: 1px solid ", ";\n    border-radius: ", ";\n    background-color: ", ";\n    padding: 20px 43px 20px 20px;\n    box-shadow: ", ";\n\n    &:before,\n    &:after {\n      content: '';\n      position: absolute;\n      height: 0;\n      width: 0;\n      border: solid transparent;\n      pointer-events: none;\n    }\n    &:before {\n      border-bottom-color: ", ";\n      border-width: 9px;\n      left: ", "px;\n      margin-right: -9px;\n      bottom: 100%;\n    }\n    &:after {\n      border-bottom-color: ", ";\n      border-width: 8px;\n      margin-right: -9px;\n      bottom: 100%;\n      left: calc(", "px + 1px);\n    }\n\n    &.fi-tooltip_content--arrow-hidden {\n      &:before,\n      &:after {\n        display: none;\n      }\n    }\n\n    & .fi-tooltip_close-button {\n      position: absolute;\n      top: 0px;\n      right: 0px;\n      height: 40px;\n      width: 40px;\n      padding: 12px;\n      border-radius: ", ";\n      & .fi-tooltip_close-button_icon {\n        width: 16px;\n        height: 16px;\n      }\n      &:active {\n        background: ", ";\n      }\n      &:focus-visible {\n        ", " /* For hight contrast mode */\n        &:after {\n          ", "\n        }\n      }\n      &:hover {\n        outline: 1px solid ", ";\n      }\n    }\n    & .fi-heading {\n      margin-bottom: 10px;\n      margin-top: 0;\n    }\n    & .fi-text {\n      ", "\n    }\n  }\n"])), theme.typography.bodyTextSmall, theme.colors.depthDark2, theme.radiuses.basic, theme.colors.highlightLight4, theme.shadows.menuShadow, theme.colors.blackBase, arrowOffsetPx, theme.colors.highlightLight4, arrowOffsetPx, theme.radiuses.basic, theme.gradients.whiteBaseToDepthLight1, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.colors.blackBase, theme.typography.bodyTextSmall);
};
var templateObject_1;

exports.baseStyles = baseStyles;
//# sourceMappingURL=TooltipContent.baseStyles.js.map