@layer components {
  
  .switch {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--control-h-sm);
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-base);
    color: var(--ink);
    text-align: left;
    cursor: pointer;
  }

  
  .switch__form { display: contents; }

  .switch__track {
    position: relative;
    flex: none;
    width: 2.75rem;
    height: 1.5rem;
    border: var(--line-w-control) solid var(--line-strong);
    border-radius: var(--radius-pill);
    background: var(--surface-sunk);
    transition: background var(--transition), border-color var(--transition);
  }

  .switch__knob {
    position: absolute;
    top: 50%;
    left: 2px;
    width: 1.125rem;
    height: 1.125rem;
    border-radius: var(--radius-pill);
    background: var(--ink-faint);
    transform: translateY(-50%);
    transition: transform var(--transition), background var(--transition);
  }

  .switch[aria-checked="true"] .switch__track {
    background: var(--accent);
    border-color: var(--accent);
  }

  
  .switch[aria-checked="true"] .switch__knob {
    background: var(--surface);
    transform: translateY(-50%) translateX(calc(2.75rem - 1.125rem - 8px));
  }

  .switch:hover .switch__track { border-color: var(--ink-faint); }
  .switch[aria-checked="true"]:hover .switch__track { border-color: var(--accent); }

  .switch__label { font-weight: var(--weight-bold); }
}