@layer components{.switch{appearance:none;background:var(--input);cursor:pointer;border:none;border-radius:9999px;outline:none;flex-shrink:0;width:2.25rem;height:1.25rem;margin:0;transition:background-color .15s;position:relative;&:after{content:"";background:var(--background);border-radius:50%;width:calc(1.25rem - 4px);height:calc(1.25rem - 4px);transition:transform .15s;position:absolute;top:2px;left:2px;box-shadow:0 1px 2px oklch(0% 0 0/.15)}&:checked{background:var(--primary);&:after{transform:translate(1rem)}}&:focus-visible{outline:2px solid var(--ring);outline-offset:2px}&:disabled{cursor:not-allowed;box-shadow:inset 0 0 0 1px var(--border);&:after{background:var(--muted);box-shadow:0 0 0 1px var(--border)}&:checked{background:color-mix(in oklch, var(--primary) 45%, var(--background));box-shadow:none;&:after{background:var(--background);box-shadow:none}}}&[aria-invalid=true]{background:var(--destructive);&:checked{background:var(--destructive)}}&[data-size=xs]{width:1.5rem;height:.875rem;&:after{width:calc(.875rem - 4px);height:calc(.875rem - 4px)}&:checked:after{transform:translate(.625rem)}}&[data-size=sm]{width:1.75rem;height:1rem;&:after{width:calc(1rem - 4px);height:calc(1rem - 4px)}&:checked:after{transform:translate(.75rem)}}&[data-size=lg]{width:2.75rem;height:1.5rem;&:after{width:calc(1.5rem - 4px);height:calc(1.5rem - 4px)}&:checked:after{transform:translate(1.25rem)}}&[data-size=xl]{width:3.25rem;height:1.75rem;&:after{width:calc(1.75rem - 4px);height:calc(1.75rem - 4px)}&:checked:after{transform:translate(1.5rem)}}}.switch-item{align-items:center;gap:.5rem;display:flex;&>label{cursor:pointer;font-size:.875rem}}.switch-item-block{grid-template-columns:auto 1fr;align-items:center;gap:0 .75rem;display:grid;&>.switch{grid-row:1/3}&>label{cursor:pointer;font-size:.875rem;font-weight:500}&>.switch-description{color:var(--muted-foreground);font-size:.8125rem;line-height:1.5}}.switch-item>.switch:before{content:"";position:absolute;inset-block:-.25rem;inset-inline:-.25rem -.5rem}.switch-item-block>.switch:before{content:"";position:absolute;inset-block:-.25rem;inset-inline:-.25rem -.75rem}.switch-item:has(.switch:disabled),.switch-item-block:has(.switch:disabled){cursor:not-allowed;&>label{color:var(--muted-foreground);cursor:not-allowed}}@media (prefers-reduced-motion:reduce){.switch,.switch:after{transition:none}}@media (forced-colors:active){.switch{background:buttonface;border:1px solid buttontext;&:after{box-shadow:none;background:buttontext}&:checked{background:highlight;border-color:highlight;&:after{background:highlighttext}}&:disabled{border-color:graytext;&:after{background:graytext}}}}}