.radio {
  --chkbg: var(--bc);
  @apply border-base-content h-6 w-6 cursor-pointer appearance-none rounded-full border border-opacity-20;
  &:focus {
    box-shadow: none;
  }
  &:focus-visible {
    @apply outline-base-content outline outline-2 outline-offset-2;
  }
  &:checked,
  &[aria-checked="true"] {
    @apply bg-base-content;
    background-image: none;
    animation: radiomark var(--animation-input, 0.2s) ease-out;
    box-shadow:
      0 0 0 4px theme(colors.base-100) inset,
      0 0 0 4px theme(colors.base-100) inset;
  }
  &-primary {
    --chkbg: var(--p);
    @apply border-primary [@media(hover:hover)]:hover:border-primary;
    &:focus-visible {
      @apply outline-primary;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-primary bg-primary text-primary-content;
    }
  }
  &-secondary {
    --chkbg: var(--s);
    @apply border-secondary [@media(hover:hover)]:hover:border-secondary;
    &:focus-visible {
      @apply outline-secondary;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-secondary bg-secondary text-secondary-content;
    }
  }
  &-accent {
    --chkbg: var(--a);
    @apply border-accent [@media(hover:hover)]:hover:border-accent;
    &:focus-visible {
      @apply outline-accent;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-accent bg-accent text-accent-content;
    }
  }
  &-success {
    --chkbg: var(--su);
    @apply border-success [@media(hover:hover)]:hover:border-success;
    &:focus-visible {
      @apply outline-success;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-success bg-success text-success-content;
    }
  }
  &-warning {
    --chkbg: var(--wa);
    @apply border-warning [@media(hover:hover)]:hover:border-warning;
    &:focus-visible {
      @apply outline-warning;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-warning bg-warning text-warning-content;
    }
  }
  &-info {
    --chkbg: var(--in);
    @apply border-info [@media(hover:hover)]:hover:border-info;
    &:focus-visible {
      @apply outline-info;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-info bg-info text-info-content;
    }
  }
  &-error {
    --chkbg: var(--er);
    @apply border-error [@media(hover:hover)]:hover:border-error;
    &:focus-visible {
      @apply outline-error;
    }
    &:checked,
    &[aria-checked="true"] {
      @apply border-error bg-error text-error-content;
    }
  }
  &:disabled {
    @apply cursor-not-allowed opacity-20;
  }
}

@keyframes radiomark {
  0% {
    box-shadow:
      0 0 0 12px theme(colors.base-100) inset,
      0 0 0 12px theme(colors.base-100) inset;
  }
  50% {
    box-shadow:
      0 0 0 3px theme(colors.base-100) inset,
      0 0 0 3px theme(colors.base-100) inset;
  }
  100% {
    box-shadow:
      0 0 0 4px theme(colors.base-100) inset,
      0 0 0 4px theme(colors.base-100) inset;
  }
}

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