@layer components {
  .radio {
    @apply h-4.5 
      w-4.5 
      border 
      border-gray-300
      dark:border-gray-600
      rounded-full 
      cursor-pointer 
      inline-block 
      align-middle 
      flex-shrink-0 
      p-0 
      appearance-none
      transition-colors
      duration-150
      ease-in-out
      shadow-sm;

    &:checked {
      @apply bg-current border-current;
    }

    &.disabled {
      @apply text-gray-200 bg-gray-200 border-gray-200 dark:bg-gray-600 dark:text-gray-600 dark:border-gray-600 cursor-not-allowed;
    }
  }

  .radio-label {
    @apply items-center cursor-pointer inline-flex gap-2.5 font-semibold;
    
    &:not(.disabled) {
      &:hover {
        .radio {
          @apply border-current;
        }
      }
    }

    &.disabled {
      @apply cursor-not-allowed;
    }
  }

  .radio-group {
    @apply inline-flex gap-4;

    &.vertical {
      @apply flex-col;
    }
  }

  .radio-wrapper {
    @apply relative flex items-center justify-center;
  }

  .radio-check {
    @apply h-4.5 w-4.5 stroke-muted fill-muted opacity-0 peer-checked:opacity-100 pointer-events-none absolute top-2/4 left-2/4 -translate-y-2/4 -translate-x-2/4;
  }
}