.switch{align-items:flex-start;gap:var(--space-2);display:flex}.switch input{min-width:calc(var(--font-size-24)*2);outline-offset:var(--space-base-half-unit);background-color:var(--gray-5);border-radius:var(--space-8);border:1px solid var(--border-color);-webkit-user-select:none;-moz-user-select:none;user-select:none;min-height:22px;margin:0;transition:background-color .3s,border-color .3s;position:relative}.switch input:checked{background-color:var(--gray-9);border-color:var(--gray-9)}.switch input:checked:before{left:unset;transform:translateX(calc(100% + var(--font-size-16) - 4px))}.switch input:checked:after{content:attr(data-on);left:.4em;right:unset}.switch input:before{content:"";height:var(--font-size-16);width:var(--font-size-16);background-color:var(--gray-1);z-index:1;border-radius:50%;transition:all .3s;position:absolute;top:2px;bottom:2px;left:2px}.switch input:after{content:attr(data-off);color:var(--gray-1);font-size:var(--font-size-10);line-height:1;display:block;position:absolute;top:.5em;bottom:.5em;right:.4em}.switch input:disabled{cursor:not-allowed;background-color:rgba(34,34,34,.067)}.switch input:disabled:before{background-color:var(--gray-6)}.switch input:disabled:after{color:var(--color-primary)}.switch input:disabled~.switch-labels span{cursor:not-allowed;color:var(--gray-6)}.switch-labels{gap:var(--space-1);flex-direction:column;display:flex}.switch-labels span{color:var(--gray-9);font-size:var(--font-size-14);-webkit-user-select:none;-moz-user-select:none;user-select:none}.switch-labels p{font-size:var(--font-size-12);color:var(--gray-8);margin:0;line-height:1.2}