/* RadioGroup */
.ui-radio-group--variant-radio {
  @apply flex flex-col gap-2;
}

.ui-radio-group--variant-segmented {
  @apply flex flex-wrap items-center gap-1;
}

/* ========== variant: radio ========== */

.ui-radio-group__item--variant-radio {
  @apply inline-flex cursor-pointer items-center gap-2;
}

.ui-radio-group__item--variant-radio:has(.ui-radio-group__input:disabled) {
  @apply cursor-not-allowed;
}

.ui-radio-group__item--variant-radio .ui-radio-group__control {
  @apply inline-flex shrink-0 items-center justify-center;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input {
  @apply relative m-0 appearance-none rounded-full border border-gray-200 bg-white outline-none transition-colors;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input::after {
  content: "";
  @apply absolute left-1/2 top-1/2 hidden -translate-x-1/2 -translate-y-1/2 rounded-full;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--sm {
  @apply size-3;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--md {
  @apply size-4;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--lg {
  @apply size-5;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input:checked {
  @apply border-indigo-500 bg-white;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--sm:checked::after {
  @apply block size-1.5 bg-indigo-500;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--md:checked::after {
  @apply block size-2.5 bg-indigo-500;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input--lg:checked::after {
  @apply block size-3 bg-indigo-500;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input:disabled {
  @apply cursor-not-allowed border-gray-200 bg-gray-50;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input:checked:disabled {
  @apply border-gray-200 bg-white;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input:checked:disabled::after {
  @apply bg-gray-300;
}

.ui-radio-group__item--variant-radio .ui-radio-group__input:focus-visible {
  @apply ring-2 ring-indigo-500 ring-offset-1;
}

.ui-radio-group__item--variant-radio .ui-radio-group__label {
  @apply font-normal text-gray-900;
}

.ui-radio-group__item--variant-radio .ui-radio-group__label--sm {
  @apply text-sm leading-5;
}

.ui-radio-group__item--variant-radio .ui-radio-group__label--md {
  @apply text-base leading-6;
}

.ui-radio-group__item--variant-radio .ui-radio-group__label--lg {
  @apply text-lg leading-7;
}

.ui-radio-group__item--variant-radio:has(.ui-radio-group__input:disabled) .ui-radio-group__label {
  @apply text-gray-400;
}

/* ========== variant: segmented ========== */

.ui-radio-group__item--variant-segmented {
  @apply inline-flex min-h-8 cursor-pointer items-center gap-1 rounded-md bg-white px-2 py-1 text-gray-600;
}

.ui-radio-group__item--variant-segmented .ui-radio-group__input {
  @apply sr-only;
}

.ui-radio-group__item--variant-segmented:hover {
  @apply bg-gray-100;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:checked) {
  @apply bg-indigo-100 text-indigo-700;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:disabled) {
  @apply cursor-not-allowed bg-white text-gray-400;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:checked:disabled) {
  @apply cursor-not-allowed bg-indigo-50 text-indigo-400;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:focus-visible) {
  @apply ring-2 ring-indigo-500 ring-offset-1;
}

.ui-radio-group__item--variant-segmented .ui-radio-group__label {
  @apply text-sm font-normal leading-5;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:checked)
  .ui-radio-group__label {
  @apply font-semibold;
}

.ui-radio-group__item--variant-segmented .ui-radio-group__count {
  @apply inline-flex items-center justify-center rounded-full bg-red-50 px-2 py-0.5;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:checked)
  .ui-radio-group__count {
  @apply rounded-sm bg-indigo-100;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:disabled)
  .ui-radio-group__count {
  @apply bg-gray-100;
}

.ui-radio-group__item--variant-segmented .ui-radio-group__count-text {
  @apply text-sm font-normal leading-5 text-red-500;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:checked)
  .ui-radio-group__count-text {
  @apply text-indigo-700;
}

.ui-radio-group__item--variant-segmented:has(.ui-radio-group__input:disabled)
  .ui-radio-group__count-text {
  @apply text-gray-400;
}