/*
 * Toggle Switch Component
 * On/off toggle with hidden checkbox input
 */

@layer components {
  .toggle-switch {
    --toggle-width: 2.25rem;
    --toggle-height: 1.25rem;
    --toggle-knob-size: 1rem;

    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--inline-space-half);
    cursor: pointer;
  }

  .toggle-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle-switch__track {
    width: var(--toggle-width);
    height: var(--toggle-height);
    background-color: var(--color-gray-medium);
    border-radius: var(--radius-full);
    position: relative;
    transition: background-color 150ms ease;

    &::after {
      content: "";
      position: absolute;
      top: 2px;
      left: 2px;
      width: var(--toggle-knob-size);
      height: var(--toggle-knob-size);
      background-color: var(--color-white);
      border-radius: var(--radius-full);
      border: var(--border-standard);
      transition: transform 150ms ease;
    }
  }

  /* Use :has() to handle Rails check_box hidden input breaking + adjacency */
  .toggle-switch:has(.toggle-switch__input:checked) .toggle-switch__track {
    background-color: var(--color-gray-darker);

    &::after {
      transform: translateX(var(--toggle-knob-size));
      border-color: transparent;
    }
  }

  .toggle-switch:has(.toggle-switch__input:focus-visible) .toggle-switch__track {
    box-shadow: 0 0 0 var(--focus-ring);
  }

  /* Small variant */
  .toggle-switch--sm {
    --toggle-width: 1.75rem;
    --toggle-height: 1rem;
    --toggle-knob-size: 0.75rem;
  }
}