@layer components{:root{--twentyone--toggle--width: calc(var(--twentyone--spacing--32) * 1.25);--twentyone--toggle--height: var(--twentyone--spacing--24);--twentyone--toggle--padding: calc(var(--twentyone--element--padding) / 16);--twentyone--toggle--border-radius: var(--twentyone--element--border-radius);--twentyone--toggle--border-width: var(--twentyone--element--border-width);--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--border-color--inverted: transparent;--twentyone--toggle--border-color--inverted--active: transparent;--twentyone--toggle--background--inverted: rgba(var(--twentyone--color--white-rgb), .25);--twentyone--toggle--background--inverted--active: var(--twentyone--color--white);--twentyone--toggle--thumb--background--inverted: var(--twentyone--color--white);--twentyone--toggle--thumb--background--inverted--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--background--inverted);border-color:var(--twentyone--toggle--border-color--inverted)}.twentyone-toggle.is--inverted .twentyone-fake-element::before{background:var(--twentyone--toggle--thumb--background--inverted)}.twentyone-toggle.is--inverted input:checked~.twentyone-fake-element{background:var(--twentyone--toggle--background--inverted--active);border-color:var(--twentyone--toggle--border-color--inverted--active)}.twentyone-toggle.is--inverted input:checked~.twentyone-fake-element::before{background:var(--twentyone--toggle--thumb--background--inverted--active)}}