.wui-radio-wrapper {
  @apply flex m-0 p-0 relative justify-start align-middle;
  @apply cursor-pointer outline-none leading-4 whitespace-nowrap;
  align-items: normal;

  &--disabled {
    @apply cursor-not-allowed;

    .wui-radio-circle,
    .wui-radio-circle:hover {
      @apply opacity-0;
    }

    .wui-radio-border,
    .wui-radio-border:hover,
    .wui-radio-border:active {
      @apply border cursor-not-allowed bg-neutral-100 border-neutral-300;
    }

    .wui-radio-lavel {
      @apply text-neutral-300;
    }
  }

  &--primary {
    .wui-radio-border:hover {
      @apply border border-primary-500;
    }

    .wui-radio-border:active {
      @apply border border-primary-500;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply border bg-primary-500 border-primary-500;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-primary-500;
    }
  }

  &--success {
    .wui-radio-border:hover {
      @apply border border-success-500;
    }

    .wui-radio-border:active {
      @apply border border-success-500;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply border bg-success-500 border-success-500;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-success-500;
    }
  }

  &--warning {
    .wui-radio-border:hover {
      @apply border border-warning-500;
    }

    .wui-radio-border:active {
      @apply border border-warning-500;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply border bg-warning-500 border-warning-500;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-warning-500;
    }
  }

  &--danger {
    .wui-radio-border:hover {
      @apply border border-danger-500;
    }

    .wui-radio-border:active {
      @apply border border-danger-500;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply border bg-danger-500 border-danger-500;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-danger-500;
    }
  }

  &--neutral {
    .wui-radio-border:hover {
      @apply border border-neutral-500;
    }

    .wui-radio-border:active {
      @apply border border-neutral-500;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply border bg-neutral-500 border-neutral-500;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-neutral-500;
    }
  }

  &--black {
    .wui-radio-border:hover {
      @apply border border-black;
    }

    .wui-radio-border:active {
      @apply border border-black;
    }

    &--checked {
      .wui-radio-border,
      .wui-radio-border:hover {
        @apply bg-black border border-black;
      }

      .wui-radio-circle {
        @apply bg-white opacity-100;
      }
    }

    .wui-radio-input:focus + .wui-radio-border {
      @apply border-black;
    }
  }
}

.wui-radio-circle {
  @apply rounded-full h-6px w-2;
  @apply opacity-0 transition-all translate-x-1/2 translate-y-1/2;
}

.wui-radio-border {
  @apply border rounded-full border-neutral-600 m-0 relative;
  @apply h-4 min-w-4 min-h-4 w-4;
  @apply flex box-border whitespace-nowrap align-middle justify-center;
  @apply cursor-pointer outline-none shadow-input transition-all ;
}

.wui-radio-input {
  @apply m-0 top-0 right-0 bottom-0 left-0 absolute;
  @apply h-full w-full;
  @apply cursor-pointer opacity-0;
}
.wui-radio-input:checked > .wui-radio-border > .wui-radio-circle {
  @apply opacity-0 scale-1 translate-x-1/2 translate-y-1/2;
}

.wui-radio-label-group {
  @apply pl-2;
}

.wui-radio-input:focus + .wui-radio-border {
  box-shadow: 0 0 0 3px rgba(0,0,0, 0.1);
}

.wui-radio-label {
  @apply flex align-middle relative;
  @apply transition-all whitespace-pre-wrap;
}

.wui-radio-label--sub {
  @apply mt-2 text-neutral-500;
}
.wui-radio-label::before {
  @apply rounded-full h-2px transition-all w-0 absolute;
  @apply bg-neutral-400;
  content: '';
}
.wui-radio-label--disabled {
  @apply text-neutral-400;
}