@dnb/eufemia/components/toggle-button/style/themes/dnb-toggle-button-theme-sbanken--isolated.css

DNB Eufemia Design System UI Library

/*
* ToggleButton theme for Sbanken
*
*/
.eufemia-scope--11_0_0 .dnb-toggle-button .dnb-radio {
  --radio-color-border-on: var(--sb-color-violet);
  --radio-color-border-off: var(--sb-color-violet);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__button {
  --button-color-bg--default: var(--sb-color-white);
  --button-color-bg--hover: var(--sb-color-violet-light-3);
  --button-color-bg--active: var(--sb-color-violet);
  --button-color-bg--focus: transparent;
  --button-color-text--default: var(--sb-color-violet);
  --button-color-text--hover: var(--sb-color-violet);
  --button-color-text--active: var(--sb-color-violet-light-3);
  --button-color-text--disabled: var(--sb-color-gray-dark);
  --button-color-border--default: var(--sb-color-violet);
  --button-color-border--active: var(--sb-color-violet-light-3);
  --button-color-border--focus: var(--focus-ring-color);
  --button-color-border--disabled: var(--sb-color-gray-light);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
  background-color: var(--focus-ring-color);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
  color: var(--focus-ring-color);
}
.eufemia-scope--11_0_0 .dnb-toggle-button {
  /* stylelint-disable no-descending-specificity */
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio {
  --radio-color-dot-on: transparent;
  --radio-color-background--error: var(--sb-color-white);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio {
  --radio-color-background--error: var(--sb-color-white);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button {
  --button-color-bg--default: var(--sb-color-violet);
  --button-color-bg--hover: var(--sb-color-violet);
  --button-color-bg--active: var(--sb-color-violet);
  --button-color-bg--focus: var(--sb-color-blue-light-2);
  --button-color-bg--disabled: var(--sb-color-gray-light);
  --button-color-border--hover: var(--sb-color-violet);
  --button-color-border--active: var(--sb-color-violet-light-3);
  --button-color-border--disabled: var(--sb-color-gray-light);
  --button-color-text--default: var(--sb-color-white);
  --button-color-text--hover: var(--sb-color-white);
  --button-color-text--active: var(--sb-color-violet-light-3);
  --button-color-text--focus: var(--sb-color-blue-dark-2);
  --button-color-text--disabled: var(--sb-color-gray-dark);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button .dnb-checkbox {
  --checkbox-color-background-on: var(--sb-color-white);
  --checkbox-color-border-on: var(--sb-color-white);
  --checkbox-color-gfx-on: var(--sb-color-violet);
}
.eufemia-scope--11_0_0 .dnb-toggle-button {
  /* stylelint-enable no-descending-specificity */
}