.switch{display:inline-flex;align-items:center;gap:var(--spacing-2xsm);position:relative;font-size:var(--font-size-3);line-height:1em}.switch input{-webkit-appearance:none;-moz-appearance:none;appearance:none}.switch:before{content:"";display:inline-block;background-color:var(--border-strong);width:3.25rem;height:1.75rem;border-radius:var(--radius-3xl)}.switch>span{background-color:var(--background-default);width:1.25rem;height:1.25rem;border-radius:var(--radius-3xl);position:absolute;left:.25rem;transition:left .1s linear}.switch:hover>span,.switch:focus-within>span{left:.5rem}.switch:hover:before,.switch:focus-within:before{background-color:var(--surface-accent-hover)}.switch:has(input:checked):before{background-color:var(--surface-accent)}.switch:has(input:checked)>span{left:1.75rem;color:var(--surface-invert);display:flex;flex-direction:column;justify-content:center;align-items:center}.switch:has(input:checked)>span:after{content:"";position:absolute;width:1rem;height:1rem;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3e%3cpath%20fill='currentColor'%20d='m9.55%2018-5.7-5.7%201.425-1.425L9.55%2015.15l9.175-9.175L20.15%207.4z'/%3e%3c/svg%3e") no-repeat center/contain;mask:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%3e%3cpath%20fill='currentColor'%20d='m9.55%2018-5.7-5.7%201.425-1.425L9.55%2015.15l9.175-9.175L20.15%207.4z'/%3e%3c/svg%3e") no-repeat center/contain}.switch:has(input:checked):hover>span,.switch:has(input:checked):focus-within>span{left:1.5rem}.switch:has(input:checked):hover:before,.switch:has(input:checked):focus-within:before{background-color:var(--surface-hover)}