@layer components {
  /* ============================================================================
   * TOGGLE/SWITCH COMPONENT
   * On/off switch control
   * ========================================================================= */

  .toggle {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
  }

  .toggle__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    user-select: none;
  }

  /* Hide native checkbox */
  .toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
  }

  /* Switch container */
  .toggle__switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: var(--color-gray-2);
    border-radius: var(--radius-pill);
    transition: background-color var(--transition-fast);
    flex-shrink: 0;
  }

  /* Slider */
  .toggle__slider {
    position: absolute;
    background-color: white;
    border-radius: var(--radius-circle);
    box-shadow: var(--shadow-sm);
    transition: transform var(--transition-fast);
  }

  /* Size variants */
  .toggle__switch--sm {
    width: 2rem;
    height: 1.125rem;
    padding: 0.125rem;
  }

  .toggle__switch--sm .toggle__slider {
    width: 0.875rem;
    height: 0.875rem;
  }

  .toggle__switch--md {
    width: 2.75rem;
    height: 1.5rem;
    padding: 0.125rem;
  }

  .toggle__switch--md .toggle__slider {
    width: 1.25rem;
    height: 1.25rem;
  }

  .toggle__switch--lg {
    width: 3.5rem;
    height: 2rem;
    padding: 0.25rem;
  }

  .toggle__switch--lg .toggle__slider {
    width: 1.5rem;
    height: 1.5rem;
  }

  /* Toggle text label */
  .toggle__text {
    color: var(--color-dark);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
  }

  /* Help text */
  .toggle__help {
    font-size: var(--font-size-sm);
    color: var(--color-gray-3);
    margin-left: calc(2.75rem + var(--space-sm)); /* Align with text */
  }

  /* Error message */
  .toggle__error {
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-left: calc(2.75rem + var(--space-sm)); /* Align with text */
  }

  /* ============================================================================
   * TOGGLE STATES
   * ========================================================================= */

  /* Checked state */
  .toggle__input:checked + .toggle__switch {
    background-color: var(--color-brand);
  }

  .toggle__input:checked + .toggle__switch--sm .toggle__slider {
    transform: translateX(0.875rem);
  }

  .toggle__input:checked + .toggle__switch--md .toggle__slider {
    transform: translateX(1.25rem);
  }

  .toggle__input:checked + .toggle__switch--lg .toggle__slider {
    transform: translateX(1.5rem);
  }

  /* Hover state */
  .toggle__label:hover .toggle__switch {
    background-color: var(--color-gray-3);
  }

  .toggle__label:hover .toggle__input:checked + .toggle__switch {
    background-color: var(--color-brand-active);
  }

  /* Focus state */
  .toggle__input:focus-visible + .toggle__switch {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }

  /* Disabled state */
  .toggle--disabled,
  .toggle__input:disabled + .toggle__switch {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .toggle--disabled .toggle__label {
    cursor: not-allowed;
  }

  /* Error state */
  .toggle--error .toggle__switch {
    outline: 1px solid var(--color-error);
  }

  /* ============================================================================
   * DARK MODE ADJUSTMENTS
   * ========================================================================= */

  @media (prefers-color-scheme: dark) {
    .toggle__switch {
      background-color: var(--color-gray-3);
    }

    .toggle__slider {
      background-color: var(--color-bg-main);
    }

    .toggle__label:hover .toggle__switch {
      background-color: var(--color-gray-4);
    }
  }
}