.ga-checkbox {
  @apply relative inline-flex gap-2;

  .ga-checkbox__marker {
    @apply animate-state pointer-events-none absolute top-0 left-0 h-4 w-4 rounded border-2 border-(--ga-color-border-action) text-white transition-colors;

    .ga-checkbox__marker__indicator-checked,
    .ga-checkbox__marker__indicator-indeterminate {
      @apply hidden;
    }
  }

  .ga-checkbox__native {
    @apply h-4 w-4 flex-shrink-0 cursor-pointer opacity-0;

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

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

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

      .ga-checkbox__marker__indicator-checked {
        @apply block;
      }
    }

    &:indeterminate ~ .ga-checkbox__marker {
      @apply bg-(--ga-color-surface-action);

      .ga-checkbox__marker__indicator-indeterminate {
        @apply block;
      }
    }

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

      ~ .ga-checkbox__marker {
        @apply border-(--ga-color-border-disabled) bg-(--ga-color-surface-disabled) text-(--ga-color-text-disabled);
      }
      ~ .ga-checkbox__label {
        @apply text-(--ga-color-text-disabled);
      }
    }
  }

  &:not(.ga-checkbox--invalid) .ga-checkbox__native:hover:not(:disabled) {
    &:checked,
    &:indeterminate {
      ~ .ga-checkbox__marker {
        @apply bg-(--ga-color-surface-action-hover);
      }
    }
  }

  &.ga-checkbox--invalid {
    .ga-checkbox__native ~ .ga-checkbox__marker {
      @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error) text-(--ga-color-border-error);
    }
  }

  .ga-checkbox__label {
    @apply text-md min-h-4 leading-4;

    &:empty {
      @apply hidden;
    }
  }
}