@import '../custom.less';

@radio-button-prefix-cls: ~'@{css-prefix}radio-button';

.@{radio-button-prefix-cls} {
  &:first-child &__inner {
    @apply border-l border-l-color-border;
    @apply rounded-tl-sm rounded-tr-none rounded-br-none rounded-bl-sm;
  }

  &:first-child &__orig-radio:checked + &__inner {
    @apply shadow-none;
  }

  &:last-child &__inner {
    @apply rounded-tl-none rounded-tr-sm rounded-br-sm rounded-bl-none;
  }

  &:first-child:last-child &__inner {
    @apply rounded-sm;
  }

  &,
  &__inner {
    @apply inline-block;
    @apply relative;
    @apply outline-0;
  }

  &__inner {
    @apply text-color-text-primary;
    @apply text-sm;
    @apply bg-color-bg-1;
    @apply border border-solid border-color-border;
    @apply py-3 px-5;
    @apply font-medium;
    @apply rounded-none;
    @apply border-l-0;
    @apply leading-none;
    @apply whitespace-nowrap;
    @apply align-middle;
    @apply appearance-none;
    @apply text-center;
    @apply box-border;
    @apply m-0;
    @apply cursor-pointer;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);

    &.is-round {
      @apply py-3 px-5;
    }

    &:hover {
      @apply text-color-text-inverse;
      @apply bg-color-brand-hover;
      @apply border-color-brand-hover;
      @apply outline-0;
    }
  }

  &__orig-radio {
    @apply opacity-0;
    @apply outline-0;
    @apply absolute;
    @apply ~'-z-[1]';

    &:checked {
      & + .@{radio-button-prefix-cls}__inner {
        @apply text-color-text-inverse;
        @apply bg-color-brand;
        @apply border-color-border-focus;
        box-shadow: -1px 0 0 0 theme('colors.color.brand.DEFAULT');

        &:hover {
          @apply bg-color-brand-hover;
          @apply border-color-brand-hover;
          box-shadow: -1px 0 0 0 theme('colors.color.brand.hover.DEFAULT');
        }
      }
    }

    &:disabled {
      & + .@{radio-button-prefix-cls}__inner {
        @apply text-color-text-secondary;
        @apply border-color-border-disabled;
        @apply bg-color-bg-2;
        @apply bg-none;
        @apply shadow-none;
        @apply cursor-not-allowed;
      }
    }

    &:disabled:checked {
      & + .@{radio-button-prefix-cls}__inner {
        @apply bg-color-brand-disabled;
        box-shadow: -1px 0 0 0 theme('colors.transparent');

        &,
        &:hover {
          @apply border-color-brand-disabled;
        }
      }
    }
  }

  &--medium &__inner {
    @apply text-sm;
    @apply ~'py-2.5' px-5;
    @apply rounded-none;

    &.is-round {
      @apply ~'py-2.5' px-5;
    }
  }

  &--small &__inner {
    @apply text-sm;
    padding: 9px 15px;
    @apply rounded-none;

    &.is-round {
      padding: 9px 15px;
    }
  }

  &--mini &__inner {
    @apply text-sm;
    padding: 7px 15px;
    @apply rounded-none;

    &.is-round {
      padding: 7px 15px;
    }
  }

  &:focus:not(.is-focus):not(:active):not(.is-disabled) {
    box-shadow: 0 0 2px 2px theme('colors.color.brand.hover.DEFAULT');
  }
}