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

DNB Eufemia Design System UI Library

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