suomifi-ui-components/dist/esm/core/Navigation/ServiceNavigation/ServiceNavigationItem/ServiceNavigationItem.baseStyles.js

Suomi.fi UI component library

import { __makeTemplateObject } from 'tslib';
import { font } from '../../../theme/reset/index.js';
import { css } from 'styled-components';

var baseStyles = function baseStyles(theme) {
  return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", ";\n\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-service-navigation-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    &:hover,\n    &:active {\n      background: ", ";\n      cursor: pointer;\n      border-left: 4px solid ", ";\n      .fi-link--router {\n        padding-left: calc(", " - 4px);\n      }\n    }\n\n    &:focus-within {\n      ", ";\n      z-index: ", ";\n    }\n\n    .fi-link--router {\n      text-decoration: none;\n      color: ", ";\n      display: flex;\n      padding: ", " ", ";\n      flex: 1;\n      cursor: pointer;\n      background: inherit;\n      border: none;\n\n      &:focus {\n        border: none;\n        box-shadow: none;\n        color: ", ";\n        ", "/* For high contrast mode */\n      }\n\n      &:hover,\n      &:active,\n      &:visited {\n        text-decoration: none;\n        color: ", ";\n      }\n    }\n\n    &--disabled {\n      &:hover,\n      &:active {\n        background: transparent;\n        cursor: not-allowed;\n        border-left: none;\n        .fi-link--router {\n          padding-left: ", ";\n        }\n      }\n      .fi-link--router {\n        color: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n\n        &:hover,\n        &:active,\n        &:visited {\n          color: ", ";\n        }\n      }\n    }\n\n    &--selected {\n      display: flex;\n      align-items: center;\n      background: ", ";\n      border-left: 4px solid ", ";\n      position: relative;\n\n      &:focus {\n        ", ";\n      }\n\n      .fi-link--router {\n        font-weight: bold;\n        text-decoration: none;\n        color: ", ";\n        display: flex;\n        padding: ", " ", ";\n        padding-left: calc(", " - 4px);\n        flex: 1;\n\n        &:hover,\n        &:active,\n        &:visited {\n          text-decoration: none;\n          color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  ", ";\n\n  /* stylelint-disable no-descending-specificity */\n  /* Nested :hover etc selectors do not work well with this rule. */\n  &.fi-service-navigation-item {\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    &:hover,\n    &:active {\n      background: ", ";\n      cursor: pointer;\n      border-left: 4px solid ", ";\n      .fi-link--router {\n        padding-left: calc(", " - 4px);\n      }\n    }\n\n    &:focus-within {\n      ", ";\n      z-index: ", ";\n    }\n\n    .fi-link--router {\n      text-decoration: none;\n      color: ", ";\n      display: flex;\n      padding: ", " ", ";\n      flex: 1;\n      cursor: pointer;\n      background: inherit;\n      border: none;\n\n      &:focus {\n        border: none;\n        box-shadow: none;\n        color: ", ";\n        ", "/* For high contrast mode */\n      }\n\n      &:hover,\n      &:active,\n      &:visited {\n        text-decoration: none;\n        color: ", ";\n      }\n    }\n\n    &--disabled {\n      &:hover,\n      &:active {\n        background: transparent;\n        cursor: not-allowed;\n        border-left: none;\n        .fi-link--router {\n          padding-left: ", ";\n        }\n      }\n      .fi-link--router {\n        color: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n\n        &:hover,\n        &:active,\n        &:visited {\n          color: ", ";\n        }\n      }\n    }\n\n    &--selected {\n      display: flex;\n      align-items: center;\n      background: ", ";\n      border-left: 4px solid ", ";\n      position: relative;\n\n      &:focus {\n        ", ";\n      }\n\n      .fi-link--router {\n        font-weight: bold;\n        text-decoration: none;\n        color: ", ";\n        display: flex;\n        padding: ", " ", ";\n        padding-left: calc(", " - 4px);\n        flex: 1;\n\n        &:hover,\n        &:active,\n        &:visited {\n          text-decoration: none;\n          color: ", ";\n        }\n      }\n    }\n  }\n"])), font(theme)('bodySemiBold'), theme.colors.highlightLight3, theme.colors.highlightBase, theme.spacing.m, theme.focuses.boxShadowFocus, theme.zindexes.focus, theme.colors.blackBase, theme.spacing.xs, theme.spacing.m, theme.colors.blackBase, theme.focuses.highContrastFocus, theme.colors.blackBase, theme.spacing.m, theme.colors.depthBase, theme.colors.depthBase, theme.colors.highlightLight3, theme.colors.highlightBase, theme.focuses.absoluteFocus, theme.colors.blackBase, theme.spacing.xs, theme.spacing.l, theme.spacing.m, theme.colors.blackBase);
};
var templateObject_1;

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