@dnb/eufemia/es/components/switch/style/dnb-switch--isolated.min.css

DNB Eufemia Design System UI Library

.eufemia-scope--11_0_0 .dnb-switch{--switch-width--medium:2.5rem;--switch-height--medium:1.5rem;--switch-button-size-off--medium:0.75rem;--switch-button-size-on--medium:1.125rem;--switch-button-size-off--large:1rem;--switch-button-size-on--large:1.625rem;--switch-width--large:3.25rem;--switch-height--large:2rem;--switch-border-width--medium:0.0625rem;--switch-border-width--large:0.125rem;display:inline-flex;flex-direction:column;font-size:var(--font-size-small);line-height:var(--line-height-basis)}.eufemia-scope--11_0_0 .dnb-switch__inner{display:inline-flex;flex-direction:column;font-size:var(--font-size-basis);justify-content:center}.eufemia-scope--11_0_0 .dnb-switch__shell{align-items:center;display:flex;position:relative;-webkit-user-select:none;user-select:none}.eufemia-scope--11_0_0 .dnb-switch--large{line-height:var(--switch-height--large)}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__shell{height:var(--switch-height--large)}.eufemia-scope--11_0_0 .dnb-switch__row{align-items:center;display:inline-flex;height:var(--switch-height--medium)}.eufemia-scope--11_0_0 .dnb-switch__button{background-color:var(--token-color-background-action-alternative);border-radius:50%;height:var(--switch-button-size-off--medium);left:0;position:absolute;transition:transform .16s ease-out 125ms;width:var(--switch-button-size-off--medium);z-index:4}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__button{border-width:var(--switch-border-width--large);height:var(--switch-button-size-off--large);width:var(--switch-button-size-off--large)}.eufemia-scope--11_0_0 .dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(.375rem)}.eufemia-scope--11_0_0 .dnb-switch__input:checked~.dnb-switch__button{background-color:var(--token-color-background-selected-subtle);height:var(--switch-button-size-on--medium);transform:translateX(calc(var(--switch-width--medium) - var(--switch-button-size-on--medium) - .1875rem));width:var(--switch-button-size-on--medium)}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(.5rem)}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__input:checked~.dnb-switch__button{height:var(--switch-button-size-on--large);transform:translateX(calc(var(--switch-width--large) - var(--switch-button-size-on--large) - .1875rem));width:var(--switch-button-size-on--large)}.eufemia-scope--11_0_0 .dnb-switch__background{align-items:center;background-color:var(--token-color-background-neutral);border:1px solid var(--token-color-stroke-action-alternative);border-radius:1.5rem;display:flex;flex-direction:row;height:var(--switch-height--medium);overflow:hidden;position:relative;width:var(--switch-width--medium)}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__background{height:var(--switch-height--large);width:var(--switch-width--large)}.eufemia-scope--11_0_0 .dnb-switch__input:checked~.dnb-switch__background{background-color:var(--token-color-background-selected);border-color:var(--token-color-background-selected)}.eufemia-scope--11_0_0 .dnb-switch__input{display:block;height:var(--switch-height--medium);left:0;opacity:0;position:absolute;right:0;width:var(--switch-width--medium);z-index:5}.eufemia-scope--11_0_0 .dnb-switch--large .dnb-switch__input{height:var(--switch-height--large);width:var(--switch-width--large)}.eufemia-scope--11_0_0 .dnb-switch__input{border:0;margin:0;padding:0}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]){cursor:pointer}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):active~.dnb-switch__background,.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{outline:none}html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):active~.dnb-switch__background,html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{--border-color:var(--token-color-stroke-action-focus);--border-width:var(--focus-ring-width);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--11_0_0 .dnb-switch .dnb-form-label{margin-bottom:0;margin-left:0;margin-right:0;padding-right:.5rem}.eufemia-scope--11_0_0 .dnb-switch__order{display:inline-flex}.eufemia-scope--11_0_0 .dnb-switch__suffix{order:4}.eufemia-scope--11_0_0 .dnb-switch--label-position-left .dnb-switch__suffix{padding-left:1rem}.eufemia-scope--11_0_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-switch__inner{order:2}.eufemia-scope--11_0_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-label{align-self:center;order:1}.eufemia-scope--11_0_0 .dnb-switch--label-position-left .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.eufemia-scope--11_0_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-switch__inner{order:1}.eufemia-scope--11_0_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-form-label{order:2;padding-left:.5rem}.eufemia-scope--11_0_0 .dnb-switch--label-position-right .dnb-switch__order .dnb-form-status{margin-top:.5rem;order:3}.eufemia-scope--11_0_0 .dnb-switch.dnb-skeleton .dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--skeleton-color);border-color:var(--skeleton-color)}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__background{background-color:var(--token-color-background-action-hover-subtle);border-color:var(--token-color-stroke-action-hover)}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__button{--border-color:var(--token-color-stroke-action-hover);--border-width:0.0625rem;background-color:var(--token-color-background-action-hover);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.eufemia-scope--11_0_0 .dnb-switch__input:checked:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__button{box-shadow:none}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):active~.dnb-switch__background{background-color:var(--token-color-background-action-pressed-subtle);border-color:var(--token-color-stroke-action-pressed)}.eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):active~.dnb-switch__button{background-color:var(--token-color-background-action-pressed)}html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{background-color:var(--token-color-background-action-focus-subtle)}html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{--border-color:var(--token-color-stroke-action-focus);--border-width:0.0625rem;background-color:var(--token-color-background-action-focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .eufemia-scope--11_0_0 .dnb-switch__input:checked:not([disabled]):focus~.dnb-switch__button{box-shadow:none}.eufemia-scope--11_0_0 .dnb-switch:not(.dnb-skeleton) .dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--token-color-background-neutral);border-color:var(--token-color-stroke-action-disabled)}.eufemia-scope--11_0_0 .dnb-switch:not(.dnb-skeleton) .dnb-switch__input[disabled]~.dnb-switch__button{background-color:var(--token-color-background-action-disabled)}.eufemia-scope--11_0_0 .dnb-switch:not(.dnb-skeleton) .dnb-switch__input[disabled]:checked~.dnb-switch__background{background-color:var(--token-color-background-action-disabled);border-color:var(--token-color-background-action-disabled)}.eufemia-scope--11_0_0 .dnb-switch:not(.dnb-skeleton) .dnb-switch__input[disabled]:checked~.dnb-switch__button{background-color:var(--token-color-background-neutral)}.eufemia-scope--11_0_0 .dnb-switch__status--error .dnb-switch__input:not([disabled])~.dnb-switch__background{background-color:var(--token-color-background-error-subtle);border-color:var(--token-color-stroke-error)}.eufemia-scope--11_0_0 .dnb-switch__status--error .dnb-switch__input:not([disabled])~.dnb-switch__button{background-color:var(--token-color-background-error)}