.antCheckboxFn(@checkbox-prefix-cls: ~"@{ant-prefix}-checkbox") {
  @checkbox-inner-prefix-cls: ~"@{checkbox-prefix-cls}-inner";

  .@{checkbox-prefix-cls} {
    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      background-color: #fff;
      transition: all .3s;
    }
  }
  .@{checkbox-prefix-cls}-checked,
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: @checkbox-color;
      border-color: @checkbox-color;
    }
  }
  .@{checkbox-prefix-cls}-disabled {
    .@{checkbox-inner-prefix-cls} {
      border-color: @border-color-base !important;
      background-color: @input-disabled-bg !important;
    }
  }
  .@{checkbox-prefix-cls}-readonly {
    &:hover {
      cursor: default;
    }
    .@{checkbox-prefix-cls} {
      &:hover {
        cursor: default;
      }
      input:hover {
        cursor: default;
      }
      &-inner {
        background: @gray-1;
        // background: #327cec;
        border-color: @border-color-base !important;
      }
      &-checked {
        .ant-checkbox-inner {
          &:after {
            border: 2px solid #302828;
            border-top: 0;
            border-left: 0;
          }
        }
      }
    }

    // .ant-checkbox-checked {
    //   .ant-checkbox-inner {
    //     &:after {
    //       border: 2px solid #c31717;
    //     }
    //   }
    // }
    
  }
}