/* Original switches and close control from Liquid Glass. */
@import url('./tokens.css');
/* Original native selection control from Liquid Glass. */
input.lg-check {
  appearance: none; -webkit-appearance: none; position: relative; display: inline-grid;
  place-items: center; vertical-align: middle; flex: 0 0 44px; width: 44px; height: 44px;
  padding: 0; margin: 0; border: 0; border-radius: 50%; background: transparent;
  color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
input.lg-check::before,input.lg-check::after {content: ''; grid-area: 1 / 1; pointer-events: none; box-sizing: border-box}
input.lg-check::before {
  width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid color-mix(in srgb,var(--lg-text) 42%,transparent);
  transition: background 160ms, border-color 160ms, transform 280ms var(--lg-spring);
}
input.lg-check::after {
  width: 11px; height: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor;
  opacity: 0; transform: translateY(-1px) rotate(-45deg) scale(.45);
  transition: opacity 100ms, transform 240ms var(--lg-spring);
}
input.lg-check:is(:checked,[type=checkbox]:indeterminate)::before {background: var(--lg-selection-accent,#007aff); border-color: transparent}
input.lg-check:checked::after {opacity: 1; transform: translateY(-1px) rotate(-45deg) scale(1)}
input.lg-check[type=checkbox]:indeterminate::after {width: 10px; height: 2px; border: 0; border-radius: 2px; background: currentColor; opacity: 1; transform: none}
input.lg-check[type=radio]::after {width: 8px; height: 8px; border: 0; border-radius: 50%; background: currentColor; transform: scale(.45)}
input.lg-check[type=radio]:checked::after {transform: scale(1)}
input.lg-check:focus-visible {box-shadow: none; background: color-mix(in srgb,var(--lg-selection-accent,#007aff) 20%,transparent)}
input.lg-check:enabled:active::before {transform: scale(.88)}
input.lg-check:disabled {opacity: .35; cursor: default}
@media (hover:hover) and (forced-colors:none) {input.lg-check:enabled:hover::before {border-color: var(--lg-muted)} input.lg-check:enabled:is(:checked,[type=checkbox]:indeterminate):hover::before {border-color: transparent}}
@media (forced-colors:active) {
  input.lg-check {forced-color-adjust: none; color: HighlightText}
  input.lg-check::before {border-color: CanvasText; background: Canvas}
  input.lg-check:is(:checked,[type=checkbox]:indeterminate)::before {background: Highlight; border-color: Highlight}
  input.lg-check:disabled {opacity: 1}
  input.lg-check:disabled::before {border-color: GrayText}
  input.lg-check:disabled:is(:checked,[type=checkbox]:indeterminate)::before {background: GrayText}
  input.lg-check:focus-visible {outline: 2px solid Highlight; outline-offset: -3px; background: Canvas}
}
.lg-switch {position: relative; display: inline-flex; align-items: center; min-width: 64px; height: 44px; cursor: pointer}
.lg-switch input {position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; margin: 0}
.lg-switch i {pointer-events: none; width: 64px; height: 28px; border-radius: 100px; background: #77777b55; transition: background 200ms}
.lg-switch i::after {content:''; display: block; width: 38px; height: 24px; margin: 2px; border-radius: 100px; background: white; box-shadow: 0 1px 3px #0002; transition: transform var(--lg-move) var(--lg-spring),width var(--lg-move) var(--lg-spring)}
.lg-switch input:checked+i {background: var(--lg-switch-on)}
.lg-switch input:checked+i::after {transform: translateX(22px)}
.lg-switch input:active+i::after {width: 42px}
.lg-switch input:checked:active+i::after {transform: translateX(18px)}
.lg-switch input:focus-visible+i {box-shadow: 0 0 0 4px color-mix(in srgb,var(--lg-text) 30%,transparent)}
.lg-switch input:disabled+i {opacity: .4}
.lg-close {
  position: relative; display: inline-grid; place-items: center; flex: 0 0 44px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--lg-muted); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.lg-close::before {
  content: ''; position: absolute; inset: 6px; border-radius: 50%; background: var(--lg-fill-hover);
  transition: transform var(--lg-move) var(--lg-spring),background 160ms;
}
button.lg-close>svg {position: relative; width: 20px; height: 20px; pointer-events: none; transition: transform var(--lg-move) var(--lg-spring)}
.lg-close:enabled:active::before,.lg-close:enabled:active svg {transform: scale(.9)}
.lg-close:focus-visible {outline: none; box-shadow: none; background: var(--lg-fill-hover)}
.lg-close:disabled {opacity: .4; cursor: default}
@media(hover:hover) and (forced-colors:none) {.lg-close:enabled:hover {color: var(--lg-text)} .lg-close:enabled:hover::before {background: color-mix(in srgb,var(--lg-muted) 24%,transparent)}}
@media(forced-colors:active) {.lg-close::before {border:1px solid ButtonText; background:ButtonFace}.lg-close {color:ButtonText}.lg-close:focus-visible {outline:2px solid Highlight}}

[data-motion='reduced'] .lg-switch i, [data-motion='reduced'] .lg-switch i::after {transition:none}
@media(prefers-reduced-motion:reduce){.lg-switch i,.lg-switch i::after{transition:none}}
@media(forced-colors:active){.lg-switch input:focus-visible+i{outline:2px solid Highlight;outline-offset:3px}.lg-switch i{border:1px solid CanvasText;background:Canvas}.lg-switch input:checked+i{background:Highlight}.lg-switch i::after{background:CanvasText}}