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

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

@-webkit-keyframes antCheckboxEffect {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}
@keyframes antCheckboxEffect {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: scale(1.6);
    transform: scale(1.6);
    opacity: 0;
  }
}

.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;
}

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

.@{checkbox-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: @checkbox-font-size-default;

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

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

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

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

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

    &.is-checked{
      .@{checkbox-prefix-css}-input-inner{
        .checkbox-style-setting(@checkbox-disabled-color,@checkbox-border-color);
        &::after{
          border-color: @checkbox-disabled-border-color;
        }
      }
    }

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

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

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

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

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

  & + .@{checkbox-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: 3px;
      position: relative;
      top: 0;
      left: 0;
      -webkit-transition: all .3s;
      transition: all .3s;
      cursor: pointer;
      .checkbox-style-setting(@checkbox-bg-color,@checkbox-border-color);

      &::after{
        width: 4px;
        height: 8px;
        content: "";
        display: block;
        position: absolute;
        top: 1px;
        left: 4px;
        opacity: 0;
        transform: rotate(45deg) scale(0);
        transition: all 0.1s cubic-bezier(0.71, -0.46, 0.88, 0.6), opacity 0.1s;
        -webkit-animation: antCheckboxEffect 0.36s ease-in-out;
        animation: antCheckboxEffect 0.36s ease-in-out;
        border: 2px solid @checkbox-checked-border-color;
        border-left: 0;
        border-top: 0;
      }
      &:hover{
        border-color: @checkbox-hover-border-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;
  }
}