@layer components {
  .radio {
    @apply flex flex-row items-center gap-10;
    @apply text-base text-gray-900 pb-0 cursor-pointer;

    input[type='radio'] {
      @apply appearance-none outline-none border-none relative w-20 h-20 rounded-full;

      &:before,
      &:after {
        @apply block content-[''] w-20 h-20 cursor-pointer transition-all ease-in-out duration-250 absolute top-0 left-0;
      }

      &:before {
        @apply border border-blue-900 rounded-full;
      }

      &:focus:before {
        @apply outline-none shadow-purple-600 border-purple-600;
      }

      &:checked:before {
        @apply bg-blue-900 border-blue-900;
      }

      &:after {
        @apply opacity-0 bg-no-repeat bg-center w-6 h-6 rounded-full bg-white;
        @apply mt-[7px] ml-[7px];
      }

      &:checked:after {
        @apply opacity-100;
      }

      &:hover:before {
        @apply border-blue-500 bg-blue-500;
      }

      &:disabled:before {
        @apply border-gray-500 bg-gray-500;
      }
    }
  }
}