suomifi-ui-components/dist/esm/core/Expander/ExpanderTitleButton/ExpanderTitleButton.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { css } from 'styled-components';
import { element, button, font } from '../../theme/reset/index.js';
import 'polished';
import { allStates } from '../../../utils/css/pseudo.js';
import '@babel/runtime/helpers/typeof';

var expanderTitleButtonBaseStyles = function expanderTitleButtonBaseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  min-height: 60px;\n  background-color: ", ";\n  border-radius: inherit;\n\n  &:hover {\n    background: ", ";\n  }\n\n  & .fi-expander_title-button {\n    display: block;\n  }\n  &.fi-expander_title-button--open {\n    background-color: ", ";\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  & .fi-expander_title-button_button {\n    ", "\n    ", "\n    color: ", ";\n    display: inline-block;\n    width: 100%;\n    max-width: 100%;\n    min-height: 60px;\n    padding: 17px ", " 16px ", ";\n\n    &:focus {\n      outline: 0;\n    }\n\n    &:focus-within {\n      ", "\n      &:after {\n        ", "\n      }\n    }\n\n    ", "\n    & * {\n      cursor: pointer;\n    }\n    ", "\n  }\n\n  & .fi-expander_title-button-icon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 20px;\n    width: 20px;\n    margin: ", ";\n  }\n\n  & .fi-expander_title-button--open .fi-expander_title-button-icon,\n  & .fi-expander_title-button-icon--open {\n    transform: rotate(-180deg);\n  }\n"], ["\n  ", "\n  position: relative;\n  width: 100%;\n  max-width: 100%;\n  min-height: 60px;\n  background-color: ", ";\n  border-radius: inherit;\n\n  &:hover {\n    background: ", ";\n  }\n\n  & .fi-expander_title-button {\n    display: block;\n  }\n  &.fi-expander_title-button--open {\n    background-color: ", ";\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n  }\n\n  & .fi-expander_title-button_button {\n    ", "\n    ", "\n    color: ", ";\n    display: inline-block;\n    width: 100%;\n    max-width: 100%;\n    min-height: 60px;\n    padding: 17px ", " 16px ", ";\n\n    &:focus {\n      outline: 0;\n    }\n\n    &:focus-within {\n      ", "\n      &:after {\n        ", "\n      }\n    }\n\n    ", "\n    & * {\n      cursor: pointer;\n    }\n    ", "\n  }\n\n  & .fi-expander_title-button-icon {\n    position: absolute;\n    top: 0;\n    right: 0;\n    height: 20px;\n    width: 20px;\n    margin: ", ";\n  }\n\n  & .fi-expander_title-button--open .fi-expander_title-button-icon,\n  & .fi-expander_title-button-icon--open {\n    transform: rotate(-180deg);\n  }\n"])), element(theme), theme.colors.highlightLight4, theme.gradients.depthSecondaryToDepthSecondaryDark1, theme.colors.whiteBase, button(theme), font(theme)('bodySemiBold'), theme.colors.highlightBase, theme.spacing.xxxl, theme.spacing.m, theme.focuses.highContrastFocus, theme.focuses.absoluteFocus, theme.focuses.noMouseFocus, allStates('cursor: pointer;'), theme.spacing.m);
};
var templateObject_1;

export { expanderTitleButtonBaseStyles };
//# sourceMappingURL=ExpanderTitleButton.baseStyles.js.map