@layer components {
  .color-radio-btn {
    @apply absolute opacity-0;

    &:focus + label {
      @apply ring-accent;
    }

    &:checked {
      @apply ring-2 ring-contrast;

      & + label {
        @apply flex items-center justify-center text-2xl text-accent-contrast bg-accent-base;

        &::before {
          content: "✓";
        }
      }
    }

    & + label {
      @apply inline-block w-16 h-16 text-sm font-semibold rounded-full cursor-pointer border-contrast bg-accent-base text-accent-contrast border-3;
      color: hsl(var(--color-text-muted));
    }
  }
}