@import "../../../style/index.less";

@checkbox-prefix-cls:ant-checkbox;
@checkboxgroup-prefix-cls:ant-checkbox-group;
.checkbox(@checkbox-prefix-cls: ant-checkbox,@checkbox-color:@primary-color){
  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";
  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      border-color: @checkbox-color;
      background-color: @checkbox-color;
    //  &:after {
    //    content: ' ';
    //    transform: scale(1);
    //    position: absolute;
    //    left: 2px;
    //    top: 5px;
    //    width: 8px;
    //    height: 1px;
    //  }
    }
    &:hover {
      .@{checkbox-inner-prefix-cls} {
        border-color: @checkbox-color;
      }
    }
  }
  // 选中状态
  .@{checkbox-prefix-cls}-checked {
    &:hover {
      .@{checkbox-inner-prefix-cls} {
        border-color: @checkbox-color;
      }
    }
    .@{checkbox-inner-prefix-cls} {
      border-color: @checkbox-color;
      background-color: @checkbox-color;
      //&:after {
      //    transform: rotate(45deg) scale(1);
      //    position: absolute;
      //    left: 4px;
      //    top: 1px;
      //    display: table;
      //    width: 5px;
      //    height: 8px;
      //    border: 2px solid #fff;
      //    border-top: 0;
      //    border-left: 0;
      //    content: ' ';
      //    transition: all .2s @ease-out-back .1s;
      //}
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    //修正勾选|半选禁用状态样式
    &.@{checkbox-prefix-cls}-checked,&.@{checkbox-prefix-cls}-indeterminate {
      &:hover {
        .@{checkbox-inner-prefix-cls} {
          border-color: @border-color-base;
        }
      }

      .@{checkbox-inner-prefix-cls} {
        background-color: #f3f3f3;
        border-color: @border-color-base;

        &:after {
          animation-name: none;
          border-color: #ccc;
        }
      }
    }

    &:hover {
      .@{checkbox-inner-prefix-cls} {
        border-color: @border-color-base;
      }
    }

    .@{checkbox-inner-prefix-cls} {
      border-color: @border-color-base;
      background-color: #f3f3f3;
      &:after {
        animation-name: none;
        border-color: #f3f3f3;
      }
    }

    .@{checkbox-inner-prefix-cls}-input {
      cursor: default;
    }
  }
}