@import "./src/common/var.less";
@import "./src/common/mixins.less";

@radio-prefix-css: ~"@{css-prefix}radio";

.button-size(@padding;@font-size;@border-radius;@border-color){
  padding: @padding;
  font-size:@font-size;
  border-radius:@border-radius;
  border: 1px solid @border-color;
}
.button-color(@color;@background;@border){
  background-color:@background;
  border-color:@border;
  color:@color;
}

.radio-style-setting(@background-color,@border-color){
  background-color: @background-color;
  border: 1px solid @border-color;
}

.@{radio-prefix-css}{
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  outline: none;
  font-size: @radio-font-size-default;

  & + .@{radio-prefix-css}{
    margin-left: 30px;
  }

  &.is-checked{
    .@{radio-prefix-css}-input-inner{
      .radio-style-setting(@radio-bg-color,@radio-checked-color);

      &::after{
        opacity: 1;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      }
    }

    &.is-bordered{
      border: 1px solid @radio-primary-border;
    }
  }

  &.is-disabled{
    .@{radio-prefix-css}-input-inner {
      cursor: not-allowed;
      .radio-style-setting(@radio-disabled-color,@radio-border-color);
      &::after{
        background-color: @radio-disabled-color;
      }
    }
    .@{radio-prefix-css}-label{
      cursor: not-allowed;
      color: @radio-disabled-font-color;
    }

    &.is-checked{
      .@{radio-prefix-css}-input-inner{
        .radio-style-setting(@radio-disabled-color,@radio-border-color);
        &::after{
          opacity: 1;
          transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
          background-color: #cccccc;
        }
      }
    }

    &.is-bordered {
      .radio-style-setting(@radio-bg-color,@radio-border-color);
    }
  }

  &.is-bordered {
    .button-size(@radio-default-padding; @radio-default-font-size; @radio-default-border-radius; @radio-default-border);

    &.@{radio-prefix-css}-size{
      &-large{
        .button-size(@radio-large-padding; @radio-large-font-size; @radio-large-border-radius; @radio-primary-border);
      }

      &-small{
        .button-size(@radio-small-padding; @radio-small-font-size; @radio-small-border-radius; @radio-primary-border);
      }

      &-mini{
        .button-size(@radio-mini-padding; @radio-mini-font-size; @radio-mini-border-radius; @radio-primary-border);
      }
    }
  }

  & + .@{radio-prefix-css}.is-bordered{
    margin-left: 10px;
  }

  &-input{
    display: inline-block;
    white-space: nowrap;
    outline: none;
    line-height: 1;
    position: relative;
    vertical-align: sub;
    font-variant: tabular-nums;

    &-inner{
      display: block;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      position: relative;
      top: 0;
      left: 0;
      transition: all .3s;
      cursor: pointer;
      .radio-style-setting(@radio-bg-color,@radio-border-color);

      &::after{
        width: 8px;
        height: 8px;
        border-radius: 8px;
        content: "";
        display: block;
        opacity: 0;
        position: relative;
        top: 3px;
        left: 3px;
        background-color: @radio-checked-color;
        transition: all 0.3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
      }
      &:hover{
        .radio-style-setting(@radio-bg-color,@radio-checked-color);
      }
    }

    &-original{
      opacity: 0;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: -1;
      margin: 0;
    }
  }


  &-label{
    display: inline-block;
    margin-left: 2px;
  }
}