.Radio {
  --button-size: 1rem;
  --checked-border-width: 0.3125rem;
  --disabled-dot-size: 0.3125rem;

  @apply mr-2 flex h-[var(--button-size)] w-[var(--button-size)] shrink-0 appearance-none items-center justify-evenly before:absolute before:h-[var(--button-size)] before:w-[var(--button-size)] before:rounded-full before:border before:border-gray-300 before:transition-colors focus:[box-shadow:none] before:focus:shadow-[0_0_0_0.25rem_oklch(var(--btu-theme-primary-100))] disabled:before:bg-gray-100 disabled:checked:after:z-[1] disabled:checked:after:h-[var(--disabled-dot-size)] disabled:checked:after:w-[var(--disabled-dot-size)] disabled:checked:after:rounded-full disabled:checked:after:bg-gray-400 [&:not(:checked):not(:disabled)]:before:hover:bg-primary-50 [&:not(:disabled)]:before:checked:border-primary-600 [&:not(:disabled)]:before:checked:[border-width:var(--checked-border-width)] [&:not(:disabled)]:hover:before:border-primary-800;
}

/** Note: small was arbitrarily chosen as the default radio button size during development of TreeList */
.RadioMedium {
  --button-size: 1.25rem;
  --checked-border-width: 0.375rem;
  --disabled-dot-size: 0.4375rem;
}

input[type='radio'] {
  @apply Radio;
}

li:has(> input[type='radio'] + label) {
  @apply flex items-center;
}
