.ga-switch {
  @apply relative inline-flex items-center gap-3;

  .ga-switch__marker {
    @apply animate-state pointer-events-none absolute top-0 left-0 inline-block h-6 w-12 rounded-full border border-(--ga-color-border-action) bg-(--ga-color-surface-primary) transition-colors;
  }

  .ga-switch__check-icon {
    @apply animate-state absolute top-0.75 left-1.5 text-(--ga-color-icon-on-primary) opacity-0 transition-opacity;
  }

  .ga-switch__slider {
    @apply animate-state pointer-events-none absolute top-0.75 left-0.75 inline-block h-4 w-4 rounded-full bg-(--ga-color-surface-action) transition-transform;
  }

  .ga-switch__label {
    @apply select-none;
  }

  input {
    @apply inline-block h-6 w-12 shrink-0 cursor-pointer rounded-full opacity-0;

    &:hover ~ .ga-switch__marker {
      @apply bg-(--ga-color-surface-action-hover-2);

      .ga-switch__slider {
        @apply bg-(--ga-color-surface-action-hover);
      }
    }

    &:checked {
      ~ .ga-switch__marker {
        @apply border-(--ga-color-border-action) bg-(--ga-color-surface-action);

        .ga-switch__slider {
          @apply translate-x-6 bg-(--ga-color-surface-primary);
        }

        .ga-switch__check-icon {
          @apply opacity-100;
        }
      }

      &:hover:not(:disabled) ~ .ga-switch__marker {
        @apply bg-(--ga-color-surface-action-hover);

        .ga-switch__slider {
          @apply bg-(--ga-color-surface-action-hover-2);
        }
      }
    }

    &:focus-visible ~ .ga-switch__marker {
      @apply outline-2 outline-offset-2 outline-(--ga-color-border-focus);
    }

    &:disabled {
      @apply cursor-not-allowed;

      ~ .ga-switch__marker {
        @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled);

        .ga-switch__check-icon {
          @apply text-(--ga-color-icon-on-disabled);
        }
        .ga-switch__slider {
          @apply bg-(--ga-color-icon-on-disabled);
        }
      }
    }
  }

  &.ga-switch--invalid input ~ .ga-switch__marker {
    @apply outline-2 outline-offset-2 outline-(--ga-color-border-error);
  }
}