.pix-radio-button {
  position: relative;
  z-index: 0;

  & + .pix-radio-button {
    margin-top: var(--pix-spacing-4x);
  }

  &__input {
    position: relative;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    background-color: var(--pix-neutral-0);
    border: 1.5px solid var(--pix-neutral-800);
    border-radius: 50%;
    outline: 0;
    cursor: pointer;
    appearance: none;

    // Hover effect
    &::before {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: -1;
      width: 1rem;
      height: 1rem;
      background-color: var(--pix-neutral-20);
      border-color: var(--pix-neutral-900);
      border-radius: 50%;
      transform: translate(-50%, -50%) scale(1);
      visibility: hidden;
      opacity: 0;
      transition: all 0.3s ease;
      content: '';
    }

    &:hover,
    &:focus-visible {
      &::before {
        background-color: var(--pix-neutral-20);
        transform: translate(-50%, -50%) scale(1.75);
        visibility: visible;
        opacity: 1;
      }
    }

    &:active {
      &::before {
        background-color: var(--pix-neutral-100);
        transform: translate(-50%, -50%) scale(1.75);
        visibility: visible;
        opacity: 1;
      }
    }

    // Checked state
    &:checked {
      border-color: var(--pix-primary-500);

      &::after {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 62.5%;
        height: 62.5%;
        background-color: var(--pix-primary-500);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        content: '';
      }
    }

    // Disabled state
    &[aria-disabled='true'],
    &:disabled {
      background: var(--pix-neutral-20);
      border-color: var(--pix-neutral-100);
      cursor: not-allowed;

      &::before {
        display: none;
      }

      &:checked::after {
        background-color: var(--pix-neutral-100);
      }

      &.pix-radio-button__input--state {
        position: absolute;
      }
    }
  }

  &__input--variant-modulix, svg:has(+ .pix-radio-button__input--variant-modulix) {
    position: absolute;
    clip-path: polygon(0 0);
  }

  .pix-label-wrapped--state-modulix-neutral:has(input:checked):not(.pix-label-wrapped--disabled) {
    border: 1px solid var(--pix-primary-500);
    outline: 2px solid var(--pix-primary-300);
  }
}