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

DNB Eufemia Design System UI Library

/*
* ToggleButton theme for Sbanken
*
*/
/*
 * Utilities
 */
.dnb-toggle-button__button {
  background-color: var(--sb-color-white);
  color: var(--sb-color-violet);
  --border-color: var(--sb-color-violet);
  --border-width: 0.09375rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) {
  background-color: var(--sb-color-violet-light-3);
  color: var(--sb-color-violet);
}
.dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button__button:active[disabled] {
  cursor: not-allowed;
}
.dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) {
  --border-color: var(--sb-color-violet-light-3);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  background-color: var(--sb-color-violet);
  color: var(--sb-color-violet-light-3);
}
.dnb-toggle-button__button[disabled] {
  --border-color: var(--sb-color-gray-light);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  color: var(--sb-color-gray-dark);
}
html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__button {
  background-color: transparent;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
}
html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-radio__dot {
  background-color: var(--focus-ring-color);
}
html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__button {
  background-color: transparent;
  border-color: var(--focus-ring-color);
  box-shadow: 0 0 0 0.0625rem var(--focus-ring-color);
}
html[data-whatinput=keyboard] .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus .dnb-checkbox__gfx {
  color: var(--focus-ring-color);
}
.dnb-toggle-button {
  /* stylelint-disable no-descending-specificity */
}
.dnb-toggle-button--checked .dnb-toggle-button__button[disabled] {
  --border-color: var(--sb-color-gray-light);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  background-color: var(--sb-color-gray-light);
  color: var(--sb-color-gray-dark);
}
.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active) {
  background-color: var(--sb-color-violet);
  color: var(--sb-color-white);
  box-shadow: none;
}
html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
  cursor: not-allowed;
}
html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) {
  background-color: var(--sb-color-violet);
  color: var(--sb-color-white);
  --border-color: var(--sb-color-violet);
  --border-width: 0.125rem;
  box-shadow: 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled], html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active[disabled] {
  cursor: not-allowed;
}
.dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-toggle-button--checked .dnb-toggle-button__button:active:not([disabled]) {
  --border-color: var(--sb-color-violet-light-3);
  --border-width: 0.125rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
  background-color: var(--sb-color-violet);
  color: var(--sb-color-violet-light-3);
}
html[data-whatinput=keyboard] .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus {
  color: var(--sb-color-blue-dark-2);
  background-color: var(--sb-color-blue-light-2);
}
.dnb-toggle-button {
  /* stylelint-enable no-descending-specificity */
}