@layer components {
  .form-radio-btn {
    @apply absolute mt-3 ml-3 border-contrast border-3 text-accent-base;

    &:focus {
      @apply ring-accent;
    }

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

      & + label {
        @apply text-accent-contrast bg-accent-base;
      }
    }

    & + label {
      @apply inline-flex items-center py-2 pl-8 pr-2 text-sm font-semibold rounded-lg cursor-pointer border-contrast bg-elevated border-3;

      color: hsl(var(--color-text-muted));
    }
  }
}
