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

DNB Eufemia Design System UI Library

/*
* ToggleButton component
*
*/
/*
 * Utilities
 */
.eufemia-scope--10_104_0 .dnb-toggle-button {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-small);
  line-height: var(--line-height-basis);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__inner {
  display: inline-flex;
  flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__shell {
  position: relative;
  left: 0;
  -webkit-user-select: none;
          user-select: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button--vertical {
  flex-direction: column;
  align-items: flex-start;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__component {
  padding-right: 0.5rem;
  display: inline-flex;
  align-items: center;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button.dnb-button--has-text {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox {
  margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__input {
  pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__button {
  display: unset;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__focus, .eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__button {
  width: calc(var(--checkbox-width--medium) - 0.5rem);
  height: calc(var(--checkbox-height--medium) - 0.5rem);
  border-width: 0.0625rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__dot {
  width: calc(var(--checkbox-width--medium) - 1rem);
  height: calc(var(--checkbox-height--medium) - 1rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-checkbox__gfx {
  width: calc(var(--checkbox-width--medium) - 0.75rem);
  height: calc(var(--checkbox-height--medium) - 0.75rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio {
  margin-left: -0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__input {
  pointer-events: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button__button .dnb-radio__focus, .eufemia-scope--10_104_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--10_104_0 .dnb-toggle-button__button .dnb-radio__dot {
  width: calc(var(--radio-width--medium) - 1rem);
  height: calc(var(--radio-height--medium) - 1rem);
}
.eufemia-scope--10_104_0 :not(.dnb-toggle-button-group) > .dnb-form-label + .dnb-toggle-button {
  vertical-align: top;
}
.eufemia-scope--10_104_0 .dnb-toggle-button .dnb-form-status {
  order: 2;
  margin-top: 0.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button .dnb-form-label {
  margin-right: 1rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group {
  --toggle-button-group-column-gap: 1rem;
  --toggle-button-group-row-gap: 1rem;
  display: inline-flex;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group, .eufemia-scope--10_104_0 .dnb-toggle-button-group__fieldset, .eufemia-scope--10_104_0 .dnb-toggle-button-group__shell {
  flex-grow: 1;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__top]) {
  margin-top: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__bottom]) {
  margin-bottom: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__left]) {
  margin-left: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset:not([class*=space__right]) {
  margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group fieldset {
  padding: 0;
  border: none;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group--column .dnb-toggle-button {
  display: flex;
  margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-toggle-button:last-of-type {
  margin-right: 0;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell {
  display: flex;
  flex-direction: column;
  row-gap: var(--toggle-button-group-row-gap);
}
.eufemia-scope--10_104_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--10_104_0 .dnb-toggle-button-group__shell__children--row {
  flex-direction: row;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell__children--column {
  flex-direction: column;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__shell > .dnb-form-status {
  order: 2;
  transform: translateY(-0.5rem);
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-flex-container--direction-horizontal .dnb-form-label {
  margin-top: 0.5rem;
  align-self: flex-start;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group .dnb-alignment-helper {
  line-height: 2.5rem;
}
.eufemia-scope--10_104_0 .dnb-toggle-button-group__suffix {
  font-size: var(--font-size-basis);
}
@media screen and (min-width: 40.00625em) {
  .eufemia-scope--10_104_0 .dnb-form-label + .dnb-toggle-button {
    transform: translateY(-0.5rem);
  }
}