@dnb/eufemia/components/switch/style/themes/dnb-switch-theme-sbanken.min.css

DNB Eufemia Design System UI Library

@charset "UTF-8";.dnb-switch{--switch-width--medium:3.75rem;--switch-height--medium:2rem;--switch-width--large:5rem;--switch-height--large:2.625rem;--switch-border-width--medium:0.0625rem;--switch-border-width--large:0.0625rem;--switch-spacing-height--medium:0.375rem;--switch-spacing-width--medium:0.25rem;--switch-spacing-height--large:0.5rem;--switch-spacing-width--large:0.25rem;--switch-content-width:1.125rem;--switch-content-spacing--medium:0.5rem;--switch-content-spacing--large:0.875rem;--button-dimension--medium:calc(var(--switch-height--medium) - var(--switch-spacing-height--medium));--button-dimension--large:calc(var(--switch-height--large) - var(--switch-spacing-height--large))}.dnb-switch--large .dnb-switch__row{height:var(--switch-height--large)}.dnb-switch__background{background-color:var(--sb-color-gray);border-radius:1.5rem;height:100%}.dnb-switch__background:after{color:var(--sb-color-text);content:"Av";font-size:var(--sb-font-size-small)}.dnb-switch--large .dnb-switch__background{border-radius:1.5rem;height:100%}.dnb-switch--large .dnb-switch__background:after{font-size:var(--sb-font-size-basis)}.dnb-switch__button{background-color:var(--sb-color-white);height:var(--button-dimension--medium);width:var(--button-dimension--medium)}.dnb-switch--large .dnb-switch__button{height:var(--button-dimension--large);width:var(--button-dimension--large)}.dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--medium) - var(--button-dimension--medium) - var(--switch-spacing-width--medium)))}.dnb-switch__input:checked~.dnb-switch__background{background-color:var(--sb-color-violet-light)}.dnb-switch__input:checked~.dnb-switch__background:after{color:var(--sb-color-white);content:"På";transform:translateX(var(--switch-content-spacing--medium))}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__button{transform:translateX(calc(var(--switch-width--large) - var(--button-dimension--large) - var(--switch-spacing-width--large)))}.dnb-switch--large .dnb-switch__input:checked~.dnb-switch__background:after{transform:translateX(var(--switch-content-spacing--large))}.dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(var(--switch-spacing-width--medium))}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__button{transform:translateX(var(--switch-spacing-width--large))}.dnb-switch__input:not(:checked)~.dnb-switch__background:after{transform:translateX(calc(var(--switch-width--medium) - var(--switch-content-width) - var(--switch-content-spacing--medium)))}.dnb-switch--large .dnb-switch__input:not(:checked)~.dnb-switch__background:after{transform:translateX(calc(var(--switch-width--large) - var(--switch-content-width) - var(--switch-content-spacing--large)))}.dnb-switch__input[disabled]~.dnb-switch__background{background-color:var(--sb-color-gray)}.dnb-switch__input[disabled]~.dnb-switch__background:after{color:var(--sb-color-gray-dark)}.dnb-switch__input[disabled]~.dnb-switch__button{background-color:var(--sb-color-gray-light)}.dnb-switch__input[disabled]:checked~.dnb-switch__background{background-color:var(--sb-color-violet);opacity:.3}.dnb-switch__input[disabled]:checked~.dnb-switch__background:after{color:var(--sb-color-white)}.dnb-switch__input[disabled]:checked~.dnb-switch__button{background-color:var(--sb-color-white)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{box-shadow:none;outline:initial}html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):checked:focus~.dnb-switch__button{background-color:var(--focus-ring-color)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus~.dnb-switch__button{box-shadow:none;outline:initial}html[data-whatinput=""] html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):not(:checked):focus~.dnb-switch__button{box-shadow:none}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__background{background-color:var(--sb-color-blue-light-3)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__background:after{color:var(--focus-ring-color);font-weight:var(--sb-font-weight-bold)}html[data-whatinput=keyboard] .dnb-switch__input:not([disabled]):focus~.dnb-switch__button .dnb-switch__focus{--border-color:var(--focus-ring-color);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__background:hover,.dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover~.dnb-switch__background{--border-color:var(--sb-color-violet);--border-width:0.0625rem;background-color:var(--sb-color-violet-light-3);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color);color:var(--sb-color-violet)}.dnb-switch__background:hover:after,.dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked):hover~.dnb-switch__background:after{color:var(--sb-color-violet)}.dnb-switch__input:not([disabled]):not(:focus):not(:active):checked:hover~.dnb-switch__background{background-color:var(--sb-color-violet)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active)~.dnb-switch__background{--border-color:var(--sb-color-red);--border-width:0.0625rem;background-color:var(--sb-color-white);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):hover~.dnb-switch__background{--border-color:var(--sb-color-red);--border-width:0.0625rem;background-color:var(--sb-color-magenta-light-2);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):not(:checked)~.dnb-switch__background:after{color:var(--sb-color-red)}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked~.dnb-switch__background{background-color:var(--sb-color-magenta);box-shadow:none}.dnb-switch__status--error .dnb-switch__input:not(:focus):not([disabled]):not(:active):checked:hover~.dnb-switch__background{background-color:var(--sb-color-red)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):not(:checked)~.dnb-switch__button .dnb-switch__focus{--border-color:var(--sb-color-red);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-switch__status--error .dnb-switch__input:not([disabled]):not(:focus):not(:active):checked~.dnb-switch__button .dnb-switch__focus{box-shadow:none}