.flip-toggle{--toggle-width:61px;--toggle-height:31px;--toggle-padding:2px;--thumb-size:27px;--toggle-bg:#e5e5ea;--toggle-bg-checked:#34c759;width:var(--toggle-width);height:var(--toggle-height);background:var(--toggle-bg);border-radius:calc(var(--toggle-height)/2);cursor:pointer;-webkit-user-select:none;user-select:none;border:none;outline:none;padding:0;display:inline-block;position:relative;box-shadow:inset 0 1px 4px #00000040,inset 0 -1px 2px #ffffff1a}.flip-toggle[aria-checked=true]{background:var(--toggle-bg-checked);box-shadow:inset 0 1px 4px #0000004d,inset 0 -1px 2px #fff3}.flip-toggle[aria-disabled=true]{opacity:.5;cursor:not-allowed}.flip-toggle:focus-visible{box-shadow:inset 0 1px 4px #00000040,inset 0 -1px 2px #ffffff1a,0 0 0 2px #fff,0 0 0 4px var(--toggle-bg-checked)}.flip-toggle-thumb{top:var(--toggle-padding);left:var(--toggle-padding);width:var(--thumb-size);height:var(--thumb-size);background:linear-gradient(#fff 0%,#f8f8f8 100%);border-radius:50%;transition:left .2s cubic-bezier(.4,0,.2,1);position:absolute;box-shadow:0 3px 8px #0003,0 1px 2px #0003,0 0 1px #0000001a,inset 0 -1px 1px #0000000a}.flip-toggle[aria-checked=true] .flip-toggle-thumb{left:calc(var(--toggle-width) - var(--thumb-size) - var(--toggle-padding))}