.ga-radio-group {
  @apply inline-flex flex-col gap-2;
}

.ga-radio-button {
  @apply relative inline-flex cursor-pointer gap-2;

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

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

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

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

      &::after {
        @apply absolute top-1/2 left-1/2 block h-1 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white content-[''];
      }
    }

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

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

      ~ .ga-radio-button__label {
        @apply text-(--ga-color-text-disabled);
      }

      &:checked ~ .ga-radio-button__marker::after {
        @apply bg-(--ga-color-icon-on-disabled);
      }
    }
  }

  &:not(:disabled, .ga-radio-button--invalid) {
    &:checked:hover ~ .ga-radio-button__marker {
      @apply bg-(--ga-color-surface-action-hover);
    }
  }

  &.ga-radio-button--invalid .ga-radio-button__native {
    ~ .ga-radio-button__marker {
      @apply border-(--ga-color-border-error) bg-(--ga-color-surface-error) text-(--ga-color-border-error);
    }

    &:checked ~ .ga-radio-button__marker {
      @apply bg-(--ga-color-border-error) text-(--ga-color-border-error);
    }
  }

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

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

    &:empty {
      @apply hidden;
    }
  }
}