@dnb/eufemia/components/toggle-button/style/dnb-toggle-button.min.css

DNB Eufemia Design System UI Library

.dnb-toggle-button{align-items:center;display:inline-flex;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.dnb-toggle-button__inner{display:inline-flex;flex-direction:column}.dnb-toggle-button__shell{left:0;position:relative;-webkit-user-select:none;user-select:none}.dnb-toggle-button--vertical{align-items:flex-start;flex-direction:column}.dnb-toggle-button__component{align-items:center;display:inline-flex;padding-right:.5rem}.dnb-toggle-button__button{--button-border-radius:var(--token-radius-md);--button-color-bg--default:var(--token-color-background-neutral);--button-color-bg--hover:var(--token-color-background-neutral);--button-color-bg--active:var(--token-color-background-neutral);--button-color-border--default:var(--token-color-stroke-neutral-bold);--button-color-border--hover:var(--token-color-stroke-action-hover);--button-color-border--active:var(
    --token-color-stroke-action-pressed
  );--button-color-icon--default:var(--token-color-icon-neutral);--button-color-text--default:var(--token-color-text-neutral);--button-color-text--hover:var(--token-color-text-neutral);--button-color-text--active:var(--token-color-text-neutral)}.dnb-toggle-button__button.dnb-button--has-text{padding-left:1.5rem;padding-right:1.5rem}.dnb-toggle-button__button .dnb-checkbox{margin-left:-.5rem}.dnb-toggle-button__button .dnb-checkbox__input{pointer-events:none}.dnb-toggle-button__button .dnb-checkbox__button{border-color:inherit;display:unset;transition:none}.dnb-toggle-button__button .dnb-checkbox__button,.dnb-toggle-button__button .dnb-checkbox__focus{border-width:.0625rem;height:calc(var(--checkbox-height--medium) - .25rem);width:calc(var(--checkbox-width--medium) - .25rem)}.dnb-toggle-button__button .dnb-checkbox__dot{height:calc(var(--checkbox-height--medium) - 1rem);width:calc(var(--checkbox-width--medium) - 1rem)}.dnb-toggle-button__button .dnb-checkbox__gfx{height:calc(var(--checkbox-height--medium) - .625rem);width:calc(var(--checkbox-width--medium) - .625rem)}.dnb-toggle-button__button .dnb-radio{margin-left:-.5rem}.dnb-toggle-button__button .dnb-radio__input{pointer-events:none}.dnb-toggle-button__button .dnb-radio__button{border-width:.0625rem;height:calc(var(--radio-height--medium) - .5rem);width:calc(var(--radio-width--medium) - .5rem)}.dnb-toggle-button__button .dnb-radio__dot{height:calc(var(--radio-dot--medium) - .125rem);width:calc(var(--radio-dot--medium) - .125rem)}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]) .dnb-radio .dnb-radio__button{--radio-border-inset--default:var(--radio-border-inset--hover);--radio-border-width--default:var(--radio-border-width--hover);--radio-color-border--default:var(--radio-color-border--hover);--radio-color-background--default:var(
    --radio-color-background--hover
  )}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) .dnb-radio .dnb-radio__dot{--radio-color-dot-on--default:var(--radio-color-dot-on--hover)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox .dnb-checkbox__button{--checkbox-color-background-off:var(
    --checkbox-color-background-off--hover
  );--checkbox-color-background-off--error:var(
    --checkbox-color-background-off--hover
  );--checkbox-color-background-on:var(
    --checkbox-color-background-on--hover
  );--checkbox-color-background-on--error:var(
    --checkbox-color-background-on--hover
  );--checkbox-border-inset:var(--checkbox-border-inset--hover);--checkbox-border-width:var(--checkbox-border-width--hover);--checkbox-color-border:var(--checkbox-color-border--hover)}html:not([data-whatintent=touch]) .dnb-toggle-button__button:hover:not([disabled]) .dnb-checkbox .dnb-checkbox__gfx{--checkbox-color-gfx-on:var(--checkbox-color-gfx--hover)}.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]) .dnb-radio .dnb-radio__button,html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) .dnb-radio .dnb-radio__button{--radio-border-inset--default:var(--radio-border-inset--active);--radio-border-width--default:var(--radio-border-width--active);--radio-color-border--default:var(--radio-color-border--active);--radio-color-background--default:var(
    --radio-color-background--active
  )}.dnb-toggle-button__button:active:not([disabled]) .dnb-radio .dnb-radio__dot,html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) .dnb-radio .dnb-radio__dot{--radio-color-dot-on--default:var(--radio-color-dot-on--active)}.dnb-toggle-button__button:active:not([disabled]) .dnb-checkbox .dnb-checkbox__button,html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) .dnb-checkbox .dnb-checkbox__button{--checkbox-color-background-off:var(
    --checkbox-color-background-off--active
  );--checkbox-color-background-off--error:var(
    --checkbox-color-background-off--active
  );--checkbox-color-background-on:var(
    --checkbox-color-background-on--active
  );--checkbox-color-background-on--error:var(
    --checkbox-color-background-on--active
  );--checkbox-border-inset:var(--checkbox-border-inset--active);--checkbox-border-width:var(--checkbox-border-width--default);--checkbox-color-border:var(--checkbox-color-border-on--active)}.dnb-toggle-button__button:active:not([disabled]) .dnb-checkbox .dnb-checkbox__gfx,html:not([data-whatintent=touch]) .dnb-toggle-button__button:active:not([disabled]) .dnb-checkbox .dnb-checkbox__gfx{--checkbox-color-gfx-on:var(--checkbox-color-gfx-on--active)}html:not([data-whatinput=touch]) .dnb-toggle-button__button:focus-visible[disabled]{cursor:not-allowed}html:not([data-whatinput=touch]) .dnb-toggle-button__button:focus-visible:not([disabled]) .dnb-radio .dnb-radio__button{--radio-border-inset--default:var(--radio-border-inset--focus);--radio-border-width--default:var(--radio-border-width--focus);--radio-color-border--default:var(--radio-color-border--focus);--radio-color-background--default:var(
    --radio-color-background--focus
  )}html:not([data-whatinput=touch]) .dnb-toggle-button__button:focus-visible:not([disabled]) .dnb-radio .dnb-radio__dot{--radio-color-dot-on--default:var(--radio-color-dot-on--focus)}html:not([data-whatinput=touch]) .dnb-toggle-button__button:focus-visible:not([disabled]) .dnb-checkbox .dnb-checkbox__button{--checkbox-color-background-off:var(
    --checkbox-color-background--focus
  );--checkbox-color-background-off--error:var(
    --checkbox-color-background--focus
  );--checkbox-color-background-on:var(
    --checkbox-color-background--focus
  );--checkbox-color-background-on--error:var(
    --checkbox-color-background--focus
  );--checkbox-border-inset: ;--checkbox-border-width:0.25rem;--checkbox-color-border:var(--token-color-stroke-action-focus)}html:not([data-whatinput=touch]) .dnb-toggle-button__button:focus-visible:not([disabled]) .dnb-checkbox .dnb-checkbox__gfx{--checkbox-color-gfx-on:var(--checkbox-color-gfx--focus);--checkbox-color-gfx--error:var(--checkbox-color-gfx--focus)}.dnb-toggle-button--checked .dnb-toggle-button__button{--button-color-bg--default:var(
    --token-color-background-selected-subtle
  );--button-color-bg--hover:var(
    --token-color-background-selected-subtle
  );--button-color-bg--active:var(
    --token-color-background-selected-subtle
  );--button-color-bg--disabled:var(
    --token-color-background-neutral-base
  );--button-color-border--default:var(
    --token-color-component-button-stroke-selected
  );--button-color-icon--default:var(--token-color-text-selected);--button-color-text--default:var(--token-color-text-selected);--button-color-text--hover:var(--token-color-text-selected);--button-color-text--active:var(--token-color-text-selected)}.dnb-toggle-button__status--error .dnb-toggle-button__button{--button-color-bg--default:var(--token-color-background-neutral);--button-color-border--default:var(
    --token-color-component-button-stroke-action-destructive
  );--button-color-icon--default:var(
    --token-color-component-button-icon-action-destructive
  );--button-color-text--default:var(
    --token-color-component-button-text-action-destructive
  )}.dnb-toggle-button__status--error.dnb-toggle-button--checked .dnb-toggle-button__button{--button-color-bg--default:var(--token-color-background-error-subtle)}:not(.dnb-toggle-button-group)>.dnb-form-label+.dnb-toggle-button{vertical-align:top}.dnb-toggle-button .dnb-form-status{margin-top:.5rem;order:2}.dnb-toggle-button .dnb-form-label{margin-right:1rem}.dnb-toggle-button-group{--toggle-button-group-column-gap:1rem;--toggle-button-group-row-gap:1rem;display:inline-flex}.dnb-toggle-button-group,.dnb-toggle-button-group__fieldset,.dnb-toggle-button-group__shell{flex-grow:1}.dnb-toggle-button-group fieldset:not([class*=space__top]){margin-top:0}.dnb-toggle-button-group fieldset:not([class*=space__bottom]){margin-bottom:0}.dnb-toggle-button-group fieldset:not([class*=space__left]){margin-left:0}.dnb-toggle-button-group fieldset:not([class*=space__right]){margin-right:0}.dnb-toggle-button-group fieldset{border:none;padding:0}.dnb-toggle-button-group--column .dnb-toggle-button{display:flex;margin-right:0}.dnb-toggle-button-group .dnb-toggle-button:last-of-type{margin-right:0}.dnb-toggle-button-group__shell{display:flex;flex-direction:column;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children{align-items:flex-start;column-gap:var(--toggle-button-group-column-gap);display:flex;flex-wrap:wrap;order:1;row-gap:var(--toggle-button-group-row-gap)}.dnb-toggle-button-group__shell__children--row{flex-direction:row}.dnb-toggle-button-group__shell__children--column{flex-direction:column}.dnb-toggle-button-group__shell>.dnb-form-status{order:2;transform:translateY(-.5rem)}.dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label{align-self:flex-start;margin-top:.5rem}.dnb-toggle-button-group .dnb-alignment-helper{line-height:2.5rem}.dnb-toggle-button-group__suffix{font-size:var(--font-size-basis)}@media screen and (min-width:40.00625em){.dnb-form-label+.dnb-toggle-button{transform:translateY(-.5rem)}}