.radio {
  @apply h-6 w-6 cursor-pointer appearance-none rounded-full border border-fill-primary;
  transition: background, box-shadow 0.2s ease-in-out;

  &:focus-visible {
    outline: 2px solid var(--text-color-primary);
    outline-offset: 2px;
  }

  &:checked,
  &[aria-checked=true] {
    background-color: var(--text-color-primary);
    animation: radiomark 0.2s ease-in-out;
    box-shadow: 0 0 0 4px var(--text-color-inverse) inset, 0 0 0 4px var(--text-color-inverse) inset;
  }

  &-sm {
    @apply h-5 w-5;
  }

  &-md {
    @apply h-6 w-6;
  }

  &-lg {
    @apply h-8 w-8;
  }

  &-label {
    @apply flex items-center gap-2 cursor-pointer select-none;
  }

  &:disabled {
    @apply cursor-not-allowed opacity-30;
  }
}

@keyframes radiomark {
  0% {
    box-shadow: 0 0 0 12px var(--text-color-inverse) inset, 0 0 0 12px var(--text-color-inverse) inset;
  }

  50% {
    box-shadow: 0 0 0 3px var(--text-color-inverse) inset, 0 0 0 3px var(--text-color-inverse) inset;
  }

  100% {
    box-shadow: 0 0 0 4px var(--text-color-inverse) inset, 0 0 0 4px var(--text-color-inverse) inset;
  }
}

/* backward compatibility */
.radio-mark {
  @apply hidden;
}