suomifi-ui-components/dist/cjs/core/Form/Select/BaseSelect/SelectItem/SelectItem.baseStyles.js

Suomi.fi UI component library

'use strict';

var tslib = require('tslib');
var styled = require('styled-components');
var index = require('../../../../theme/reset/index.js');

var baseStyles = function baseStyles(theme) {
  return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  padding: 8px 32px 8px 10px;\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n  &.fi-select-item {\n    cursor: pointer;\n    & .fi-select-item--query_highlight {\n      background-color: transparent;\n      font-weight: bold;\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n    }\n\n    & .fi-select-item_icon {\n      position: absolute;\n      top: 14px;\n      right: 10px;\n      height: 12px;\n      width: 12px;\n    }\n\n    &--selected {\n      background-color: ", ";\n      color: ", ";\n      & .fi-select-item--query_highlight {\n        color: ", ";\n      }\n    }\n\n    &--hasKeyboardFocus {\n      background-color: ", ";\n      color: ", ";\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n\n      & .fi-select-item--query_highlight {\n        color: ", ";\n        background-color: ", ";\n      }\n    }\n\n    &--disabled {\n      color: ", ";\n      cursor: not-allowed;\n\n      @media (forced-colors: active) {\n        color: GrayText; /* Support for high contrast mode */\n      }\n\n      & .fi-select-item--query_highlight {\n        color: ", ";\n        @media (forced-colors: active) {\n          color: GrayText;\n        }\n      }\n\n      &.fi-select-item:hover {\n        color: ", ";\n        @media (forced-colors: active) {\n          color: GrayText;\n        }\n        & .fi-select-item--query_highlight {\n          color: ", ";\n          @media (forced-colors: active) {\n            color: GrayText;\n          }\n        }\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      /* stylelint-disable no-descending-specificity */\n      & .fi-select-item--query_highlight {\n        color: ", ";\n      }\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n    }\n  }\n\n  & .fi-select-item_wrapper {\n    display: inline-block;\n    width: 100%;\n  }\n"], ["\n  position: relative;\n  padding: 8px 32px 8px 10px;\n  ", "\n\n  &:focus {\n    outline: none;\n  }\n  &.fi-select-item {\n    cursor: pointer;\n    & .fi-select-item--query_highlight {\n      background-color: transparent;\n      font-weight: bold;\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n    }\n\n    & .fi-select-item_icon {\n      position: absolute;\n      top: 14px;\n      right: 10px;\n      height: 12px;\n      width: 12px;\n    }\n\n    &--selected {\n      background-color: ", ";\n      color: ", ";\n      & .fi-select-item--query_highlight {\n        color: ", ";\n      }\n    }\n\n    &--hasKeyboardFocus {\n      background-color: ", ";\n      color: ", ";\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n\n      & .fi-select-item--query_highlight {\n        color: ", ";\n        background-color: ", ";\n      }\n    }\n\n    &--disabled {\n      color: ", ";\n      cursor: not-allowed;\n\n      @media (forced-colors: active) {\n        color: GrayText; /* Support for high contrast mode */\n      }\n\n      & .fi-select-item--query_highlight {\n        color: ", ";\n        @media (forced-colors: active) {\n          color: GrayText;\n        }\n      }\n\n      &.fi-select-item:hover {\n        color: ", ";\n        @media (forced-colors: active) {\n          color: GrayText;\n        }\n        & .fi-select-item--query_highlight {\n          color: ", ";\n          @media (forced-colors: active) {\n            color: GrayText;\n          }\n        }\n      }\n    }\n\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      /* stylelint-disable no-descending-specificity */\n      & .fi-select-item--query_highlight {\n        color: ", ";\n      }\n\n      @media (forced-colors: active) {\n        background-color: Highlight;\n      }\n    }\n  }\n\n  & .fi-select-item_wrapper {\n    display: inline-block;\n    width: 100%;\n  }\n"])), index.font(theme)('actionElementInnerText'), theme.colors.depthSecondaryDark1, theme.colors.blackBase, theme.colors.blackBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.whiteBase, theme.colors.highlightBase, theme.colors.depthBase, theme.colors.depthBase, theme.colors.depthBase, theme.colors.depthBase, theme.colors.highlightBase, theme.colors.whiteBase, theme.colors.whiteBase);
};
var templateObject_1;

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