.radio {
  @apply h-5 
    w-5 
    border 
    border-gray-300
    dark:border-gray-600
    ring-1
    ring-gray-300
    dark:ring-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 ring-current border-current;
  }

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

.radio-label {
  @apply items-center cursor-pointer inline-flex gap-2.5 font-semibold;

  &:hover {
    .radio {
      @apply ring-current border-current;
    }
  }

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

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

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