@layer components {
  .form-radio-btn {
    @apply absolute right-4 top-4 border-contrast border-3 text-accent-base transition;

    &:focus {
      @apply ring-accent;
    }

    &:checked {
      & + label {
        @apply text-accent-hover bg-base border-accent-base shadow-none;
      }

      & + label .form-radio-btn-description {
        @apply text-accent-base;
      }
    }

    & + label {
      @apply h-full w-full inline-flex flex-col items-start py-3 px-4 text-sm font-bold rounded-lg cursor-pointer border-contrast bg-elevated border-3 transition-all;

      box-shadow: 2px 2px 0 hsl(var(--color-border-contrast));
    }

    & + label span {
      @apply pr-8;
    }

    & + label .form-radio-btn-description {
      @apply font-normal text-xs text-skin-muted text-balance;
    }
  }
}