@layer components{:root{--twentyone--toggle--width: calc(var(--twentyone--spacing--32) * 1.25);--twentyone--toggle--height: var(--twentyone--spacing--24);--twentyone--toggle--padding: .0625em;--twentyone--toggle--border-radius: var(--twentyone--spacing--8);--twentyone--toggle--border-width: 1px;--twentyone--toggle--border-color: transparent;--twentyone--toggle--border-color-active: transparent;--twentyone--toggle--background: rgba(var(--twentyone--color--black-rgb), .1);--twentyone--toggle--background-active: var(--twentyone--color--primary);--twentyone--toggle--thumb-background: var(--twentyone--color--white);--twentyone--toggle--thumb-background-active: var(--twentyone--color--white);--twentyone--toggle--thumb-border-radius: 50%;--twentyone--toggle--thumb-move: 1.25em;--twentyone--toggle--inverted-border-color: transparent;--twentyone--toggle--inverted-border-color-active: transparent;--twentyone--toggle--inverted-background: rgba(var(--twentyone--color--white-rgb), .25);--twentyone--toggle--inverted-background-active: var(--twentyone--color--white);--twentyone--toggle--inverted-thumb-background: var(--twentyone--color--white);--twentyone--toggle--inverted-thumb-background-active: var(--twentyone--color--black)}.twentyone-toggle{--fake-element--width: var(--twentyone--toggle--width);--fake-element--height: var(--twentyone--toggle--height)}.twentyone-toggle .twentyone-fake-element{background:var(--twentyone--toggle--background);border-color:var(--twentyone--toggle--border-color);border-style:solid;border-width:var(--twentyone--toggle--border-width);height:var(--twentyone--toggle--height);justify-content:flex-start;padding:var(--twentyone--toggle--padding);width:var(--twentyone--toggle--width);border-radius:var(--twentyone--toggle--border-radius)}.twentyone-toggle .twentyone-fake-element::before{aspect-ratio:1;background:var(--twentyone--toggle--thumb-background);content:"";display:block;height:100%;position:relative;border-radius:calc(var(--twentyone--toggle--border-radius) - var(--twentyone--toggle--padding));transition:var(--twentyone--element--transition)}.twentyone-toggle input:checked~.twentyone-fake-element{background:var(--twentyone--toggle--background-active);border-color:var(--twentyone--toggle--border-color-active)}.twentyone-toggle input:checked~.twentyone-fake-element::before{background:var(--twentyone--toggle--thumb-background-active);translate:calc(var(--twentyone--toggle--width) - var(--twentyone--toggle--padding)*2 - var(--twentyone--toggle--border-width)*2 - 100%) 0}.twentyone-toggle.is--inverted .twentyone-fake-element{background:var(--twentyone--toggle--inverted-background);border-color:var(--twentyone--toggle--inverted-border-color)}.twentyone-toggle.is--inverted .twentyone-fake-element::before{background:var(--twentyone--toggle--inverted-thumb-background)}.twentyone-toggle.is--inverted input:checked~.twentyone-fake-element{background:var(--twentyone--toggle--inverted-background-active);border-color:var(--twentyone--toggle--inverted-border-color-active)}.twentyone-toggle.is--inverted input:checked~.twentyone-fake-element::before{background:var(--twentyone--toggle--inverted-thumb-background-active)}}