.c-toggle{display:inline-flex;align-items:center;justify-content:space-between;cursor:pointer;gap:.5rem}.c-toggle__label{font-size:1rem}.c-toggle__switch{border-radius:16px;border:none;position:relative;padding:0;outline:none;cursor:pointer;background-color:var(--color-common-neutral-200);transition:background-color .2s ease-in-out}.c-toggle__switch:focus-visible{outline:2px solid var(--color-common-neutral-400);outline-offset:2px;border-radius:16px}.c-toggle__slider{position:absolute;border-radius:50%;background-color:var(--color-common-neutral-0);transition:transform .25s cubic-bezier(.4,0,.2,1),background-color .2s;box-shadow:0 1px 2px rgba(0,0,0,.24);z-index:1}.c-toggle--checked .c-toggle__switch{background:var(--color-background-selected-accent)}.c-toggle__icon{position:absolute;pointer-events:none}.c-toggle__icon--check{fill:var(--color-common-neutral-0)}.c-toggle__icon--cross{fill:var(--color-common-neutral-400)}.c-toggle__switch:disabled{cursor:not-allowed;opacity:.5}.c-toggle--xs .c-toggle__switch{width:42px;height:20px}.c-toggle--xs .c-toggle__switch .c-toggle__slider{width:16px;height:16px;top:2px;left:2px}.c-toggle--xs .c-toggle__switch .c-toggle__slider.c-toggle__slider--checked{transform:translateX(22px)}.c-toggle--xs .c-toggle__switch .c-toggle__icon--check{left:4px;top:2px}.c-toggle--xs .c-toggle__switch .c-toggle__icon--cross{right:4px;top:2px}.c-toggle--sm .c-toggle__switch{width:48px;height:24px}.c-toggle--sm .c-toggle__switch .c-toggle__slider{width:20px;height:20px;top:2px;left:2px}.c-toggle--sm .c-toggle__switch .c-toggle__slider.c-toggle__slider--checked{transform:translateX(24px)}.c-toggle--sm .c-toggle__switch .c-toggle__icon--check{left:4px;top:2px}.c-toggle--sm .c-toggle__switch .c-toggle__icon--cross{right:4px;top:2px}.c-toggle--md .c-toggle__switch{width:64px;height:32px}.c-toggle--md .c-toggle__switch .c-toggle__slider{width:24px;height:24px;top:4px;left:4px}.c-toggle--md .c-toggle__switch .c-toggle__slider.c-toggle__slider--checked{transform:translateX(32px)}.c-toggle--md .c-toggle__icon--check{left:8px;top:4px}.c-toggle--md .c-toggle__icon--cross{right:8px;top:4px}.c-toggle--left{flex-direction:row-reverse}.c-toggle--right{flex-direction:row}