/* app/assets/stylesheets/components/toggle.css */
@layer components {
  .toggle {
    position: relative;
    display: inline-block;
    cursor: pointer;
  }

  .toggle__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .toggle__track {
    display: block;
    width: 2.75rem;
    height: 1.5rem;
    background: var(--color-border);
    border-radius: var(--radius-full);
    position: relative;
    transition: background var(--transition-fast);
  }

  .toggle__thumb {
    position: absolute;
    top: 0.15rem;
    left: 0.15rem;
    width: 1.2rem;
    height: 1.2rem;
    background: var(--color-surface);
    border-radius: 50%;
    box-shadow: var(--shadow);
    transition: transform var(--transition-fast);
  }

  .toggle__input:checked + .toggle__track {
    background: var(--color-primary);
  }

  .toggle__input:checked + .toggle__track .toggle__thumb {
    transform: translateX(1.25rem);
  }
}