.p-radiobutton {
  @apply relative inline-flex select-none align-bottom w-4 h-4;

  &-input {
    @apply cursor-pointer appearance-none absolute top-0 start-0 w-full h-full p-0 m-0 opacity-0 z-[1] outline-none outline-0 border-2 border-transparent rounded-full;
  }

  &-box {
    @apply flex justify-center items-center rounded-full border border-gray-50 bg-white w-4 h-4 transition outline-transparent drop-shadow-none;
  }

  &-icon {
    @apply duration-200 w-1.5 h-1.5 rounded-full transform-gpu;
    backface-visibility: hidden;
  }

  &:not(.p-disabled) {
    &:has(.p-radiobutton-input:hover) {
      .p-radiobutton-box {
        @apply border-primary;
      }
    }
  }

  &-checked &-box {
    @apply border-gray-50 bg-white;
  }

  &-checked &-box &-icon {
    @apply bg-gray-90 transform-gpu visible;
  }

  &:not(.p-disabled):has(&-input:hover) {
    .p-radiobutton-box {
      @apply border-primary;
    }

    &.p-radiobutton-checked .p-radiobutton-box .p-radiobutton-icon {
      @apply bg-primary;
    }
  }

  &-checked:not(.p-disabled) {
    &:has(.p-radiobutton-input:hover) .p-radiobutton-box {
      @apply border-primary bg-white;
    }

    &:has(.p-radiobutton-input:focus-visible) .p-radiobutton-box {
      @apply border-gray-50;
    }
  }

  &:not(.p-disabled):has(&-input:focus-visible) &-box {
    @apply border-primary drop-shadow-lg outline-none outline-0;
  }

  .p-radiobutton.p-invalid > .p-radiobutton-box {
    @apply border-danger;
  }

  &.p-variant-filled {
    & .p-radiobutton-box {
      @apply bg-white;
    }

    &.p-radiobutton-checked .p-radiobutton-box {
      @apply bg-white;
    }

    &:not(.p-disabled):has(.p-radiobutton-input:hover).p-radiobutton-checked .p-radiobutton-box {
      @apply bg-white;
    }
  }

  &.p-disabled {
    @apply opacity-100;
  }

  &.p-disabled &-box {
    @apply bg-gray-50 border-gray-50
  }

  &-checked.p-disabled &-box &-icon {
    @apply bg-gray-50;
  }

  &-sm,
  &-sm &-box {
    @apply w-2 h-2;
  }

  &-sm &-icon {
    @apply text-body-2 w-1.5 h-1.5;
  }

  &-lg,
  &-lg &-box {
    @apply w-6 h-6;
  }

  &-lg &-icon {
    @apply text-body-2 w-4 h-4;
  }
}
