/* A26 Toggles, Checkboxes, and Radio Buttons · v1.0.0-alpha.0012 */
@layer a26.components {
  .a26-switch { min-width: var(--a26-control-hit-min); min-height: var(--a26-control-hit-min); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
  .a26-switch input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
  .a26-switch span { width: var(--a26-switch-width); height: var(--a26-switch-height); border-radius: var(--a26-radius-pill); background: var(--a26-switch-track-off); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--a26-separator) 60%, transparent); position: relative; transition: background .18s ease; }
  .a26-switch span::after { content: ''; position: absolute; width: var(--a26-switch-thumb-size); height: var(--a26-switch-thumb-size); border-radius: 50%; inset-block-start: 2px; inset-inline-start: 2px; background: #fff; box-shadow: 0 1px 3px #00000040; transition: transform .18s ease; }
  .a26-switch input:checked + span { background: var(--a26-switch-track-on); }
  .a26-switch input:checked + span::after { transform: translateX(20px); }
  .a26-switch input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--a26-focus-ring-color) 65%, transparent); outline-offset: 3px; }
  .a26-switch input:disabled + span { opacity: .45; }

  .a26-choice-stack { display: grid; gap: 10px; align-content: start; }
  .a26-checkbox, .a26-radio { min-height: 30px; display: inline-flex; align-items: center; gap: 9px; color: var(--a26-text-primary); font: var(--a26-font-callout); cursor: pointer; }
  .a26-checkbox input, .a26-radio input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
  .a26-checkbox span, .a26-radio span { width: var(--a26-choice-size); height: var(--a26-choice-size); display: inline-grid; place-items: center; border: 1px solid var(--a26-choice-border); background: var(--a26-bg-elevated); }
  .a26-checkbox span { border-radius: 5px; }
  .a26-radio span { border-radius: 50%; }
  .a26-checkbox input:checked + span, .a26-radio input:checked + span { border-color: var(--a26-choice-fill); background: var(--a26-choice-fill); }
  .a26-checkbox input:checked + span::after { content: '✓'; color: white; font-size: 13px; line-height: 1; }
  .a26-radio input:checked + span::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: white; }
  .a26-checkbox em, .a26-radio em { font-style: normal; }
  .a26-checkbox input:focus-visible + span, .a26-radio input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--a26-focus-ring-color) 65%, transparent); outline-offset: 2px; }
  .a26-radio-group { display: flex; flex-wrap: wrap; gap: 14px; }
}