.switch{display:flex;position:relative}.switch__checkbox{opacity:0;z-index:1;cursor:pointer;border:0;width:3rem;height:3rem;padding:0;display:inline-block;position:absolute;top:-.75rem;left:0}[dir=rtl] .switch__checkbox{left:auto;right:0}.switch__label{color:rgb(var(--colour-text-and-icon-2,72, 72, 72));cursor:pointer;margin-top:.1875rem;padding-inline-start:1rem;transition:color .2s ease-in-out;display:inline;position:relative}.switch__toggle{cursor:pointer;flex-shrink:0;width:3rem;height:1.5rem;display:flex;position:relative}.switch__toggle:before{box-sizing:border-box;content:"";background:border-box rgb(var(--colour-neutral-5,146, 146, 146));border:1px solid #0000;border-radius:20px;width:100%;height:1.5rem;transition:background .2s cubic-bezier(0,0,1,1);display:block}.switch__symbol:before{content:"";box-sizing:content-box;opacity:0;border:2px solid rgb(var(--colour-interactive-emphasised-bg-default,0, 88, 163));width:.25rem;height:.5625rem;color:rgb(var(--colour-text-and-icon-1,17, 17, 17));border-top:0;border-left:0;margin-top:-.25rem;transition:all .1s cubic-bezier(0,0,1,1);display:block;transform:rotate(45deg)}.switch__button{box-sizing:border-box;background:border-box rgb(var(--colour-static-white,255, 255, 255));border:2px solid #0000;border-radius:20px;justify-content:center;align-items:center;width:1.25rem;height:1.25rem;margin:.125rem;transition:transform .2s cubic-bezier(.4,0,.4,1);display:flex;position:absolute;left:0}[dir=rtl] .switch__button{left:auto;right:0}.switch__checkbox:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-emphasised-bg-default,0, 88, 163))}.switch__checkbox:checked+.switch__toggle .switch__symbol:before{opacity:1}.switch__checkbox:checked+.switch__toggle .switch__button{transform:translate(120%)}[dir=rtl] .switch__checkbox:checked+.switch__toggle .switch__button{transform:translate(-120%)}.switch--subtle .switch__button{background:rgb(var(--colour-neutral-1,255, 255, 255))}.switch--subtle .switch__checkbox:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-primary-bg-default,17, 17, 17))}.switch--subtle .switch__checkbox:checked+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-neutral-7,17, 17, 17))}.switch .switch__checkbox:hover:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-emphasised-bg-hover,0, 79, 147))}.switch .switch__checkbox:hover:checked+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-interactive-emphasised-bg-hover,0, 79, 147))}.switch--subtle .switch__checkbox:hover:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-primary-bg-hover,51, 51, 51))}.switch--subtle .switch__checkbox:hover:checked+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-interactive-primary-bg-hover,51, 51, 51))}.switch .switch__checkbox:active:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-emphasised-bg-pressed,0, 62, 114))}.switch .switch__checkbox:active:checked+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-interactive-emphasised-bg-pressed,0, 62, 114))}.switch--subtle .switch__checkbox:active:checked+.switch__toggle:before{background:rgb(var(--colour-interactive-primary-bg-pressed,0, 0, 0))}.switch--subtle .switch__checkbox:active:checked+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-interactive-primary-bg-pressed,0, 0, 0))}.switch .switch__checkbox:disabled{cursor:default}.switch .switch__checkbox:disabled~.switch__label{pointer-events:none;color:rgb(var(--colour-interactive-disabled-1,204, 204, 204))}.switch .switch__checkbox:disabled:hover+.switch__toggle:before,.switch .switch__checkbox:disabled+.switch__toggle:before{background:rgb(var(--colour-interactive-disabled-1,204, 204, 204))}.switch .switch__checkbox:disabled:hover+.switch__toggle .switch__symbol:before,.switch .switch__checkbox:disabled+.switch__toggle .switch__symbol:before{border-color:rgb(var(--colour-interactive-disabled-1,204, 204, 204))}@media (forced-colors:active){.switch .switch__checkbox:disabled~.switch__label{color:graytext}.switch .switch__checkbox:disabled+.switch__toggle:before,.switch .switch__checkbox:disabled+.switch__toggle>.switch__button,.switch .switch__checkbox:disabled+.switch__toggle .switch__symbol:before,.switch .switch__checkbox:disabled:hover+.switch__toggle .switch__symbol:before{border-color:graytext}}@media (prefers-reduced-motion:reduce){.switch__toggle:before,.switch__symbol:before,.switch__button{transition-duration:0s}}
