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

  .form-radio-btn:focus + label {
    @apply ring;
  }

  .form-radio-btn + label {
    @apply inline-block px-2 py-1 text-sm text-black bg-white border rounded cursor-pointer;

    &:hover {
      @apply bg-pine-100;
    }
  }

  .form-radio-btn:checked + label {
    @apply text-white bg-pine-600;

    &::before {
      @apply mr-2 text-pine-200;
      content: "✓";
    }
  }
}