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

DNB Eufemia Design System UI Library

/*
* ToggleButton theme
*
*/
/*
 * Utilities
 */
.eufemia-scope--11_0_0 .dnb-toggle-button .dnb-checkbox__gfx path {
  stroke-width: 0.125rem;
}
.eufemia-scope--11_0_0 .dnb-toggle-button .dnb-radio {
  --radio-color-border-on: var(--color-sea-green);
  --radio-color-border-off: var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button {
  /* stylelint-disable */
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled], .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled], .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] {
  background-color: var(--color-mint-green-25);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active), .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active), .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active) {
  background-color: var(--color-emerald-green);
  --button-color-border--hover: var(--color-emerald-green);
  color: var(--color-mint-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button .dnb-icon, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus .dnb-icon, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover .dnb-icon {
  color: inherit;
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio {
  --radio-color-background-on: transparent;
  --radio-color-border-on: var(--color-mint-green);
  --radio-color-dot-on: var(--color-mint-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-radio__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-radio__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio__button {
  box-shadow: 0 0 0 0.0318rem var(--color-mint-green);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio {
  --radio-color-dot-on--focus: var(--color-emerald-green);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-radio__button, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-radio__button {
  --border-color: var(--color-emerald-green);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__button {
  background-color: var(--color-mint-green);
  border-color: var(--color-emerald-green);
  box-shadow: 0 0 0 0.0318rem var(--color-emerald-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__gfx, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]) .dnb-checkbox__gfx, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox__gfx {
  color: var(--color-emerald-green);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__button, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__button {
  background-color: var(--color-emerald-green);
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:hover):focus .dnb-checkbox__gfx, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:hover):focus .dnb-checkbox__gfx {
  color: var(--color-mint-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-radio__button,
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button[disabled] .dnb-checkbox__button,
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-radio__button,
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus[disabled] .dnb-checkbox__button,
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-radio__button,
.eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover[disabled] .dnb-checkbox__button {
  box-shadow: none;
}
html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:focus:not([disabled]):not(:active):not(:hover):focus, html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:hover:not([disabled]):not(:active):not(:hover):focus {
  color: var(--color-emerald-green);
  background-color: var(--color-mint-green);
  --button-color-border: var(--color-emerald-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):active .dnb-radio, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio {
  --radio-color-background--active: transparent;
  --radio-color-border--active: var(--color-sea-green);
  --radio-color-dot-on--active: var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-radio__button {
  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__button {
  background-color: transparent;
  border-color: var(--color-sea-green);
  box-shadow: 0 0 0 0.0318rem var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx, .eufemia-scope--11_0_0 .dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):active .dnb-checkbox__gfx {
  color: var(--color-sea-green);
}
.eufemia-scope--11_0_0 .dnb-toggle-button {
  /*
    * On error state
    *
    */
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
  background-color: var(--color-white);
  color: var(--color-fire-red);
  --border-color: var(--color-fire-red);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.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: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
  --border-color: var(--color-fire-red);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-radio__input:not([disabled]) ~ .dnb-radio__focus {
  box-shadow: none;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input ~ .dnb-checkbox__button {
  border: none;
  --border-color: var(--color-fire-red);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not(:hover) ~ .dnb-checkbox__button .dnb-checkbox__focus {
  box-shadow: none;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:hover):not(:focus):not(:active) {
  color: var(--color-white);
  background-color: var(--color-fire-red);
  --border-color: var(--color-fire-red);
  --border-width: 0.0625rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio {
  --radio-color-dot-on--error: var(--color-white);
  --radio-color-background--error: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]):not(:active):not(:focus) .dnb-radio__input:not([disabled]) ~ .dnb-radio__button {
  --border-color: var(--color-white);
  --border-width: 0.09375rem;
  box-shadow: inset 0 0 0 var(--border-width) var(--border-color);
  border-color: transparent;
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox__input:not([disabled]):not(:hover):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus {
  background-color: var(--color-white);
}
.eufemia-scope--11_0_0 .dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button:not([disabled]) .dnb-checkbox .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx {
  color: var(--color-fire-red);
}
.eufemia-scope--11_0_0 .dnb-toggle-button {
  /* stylelint-enable */
}
.eufemia-scope--11_0_0 .dnb-toggle-button > .dnb-form-status {
  transform: translateY(0.1875rem);
}