@mixin checkboxFn($checkbox-prefix-cls: "#{$css-prefix}checkbox") {
  $checkbox-inner-prefix-cls: "#{$checkbox-prefix-cls}-inner";

  // 普通状态
  .#{$checkbox-prefix-cls} {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    line-height: 1;
    position: relative;
    border-collapse: separate;

    &-disabled {
      cursor: $cursor-disabled;
      &.#{$checkbox-prefix-cls}-checked {
        &:hover {
          .#{$checkbox-inner-prefix-cls} {
            border-color: $mixin-checkbox-disabled-check-border-color;

            @include theme-border-color($__common-checkbox_disabled-checked-hover_border-color);
          }
        }

        .#{$checkbox-inner-prefix-cls} {
          background-color: $mixin-checkbox-disabled-color;
          border-color: $mixin-checkbox-disabled-check-border-color;

          @include theme-border-color($__common-checkbox_disabled-checked_border-color);
          @include theme-background-color($__common-checkbox_disabled-checked_background-color);

          &::after {
            animation-name: none;
            border-color: $mixin-checkbox-disabled-check-color;

            @include theme-border-color($__common-checkbox_disabled-checked-after_border-color);
          }
        }
      }

      &:hover {
        .#{$checkbox-inner-prefix-cls} {
          border-color: $mixin-checkbox-disabled-check-border-color !important;

          @include theme-border-color($__common-checkbox_disabled-hover_border-color, $--important);
          @include theme-box-shadow($__common-checkbox_disabled-hover_box-shadow, $--important);
        }
      }

      .#{$checkbox-inner-prefix-cls} {
        border-color: $mixin-checkbox-disabled-check-border-color;
        background-color: $mixin-checkbox-disabled-bg;

        @include theme-border-color($__common-checkbox-inner_disabled_border-color);
        @include theme-background-color($__common-checkbox-inner_disabled_background-color);

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

          @include theme-border-color($__common-checkbox-inner_disabled-after_border-color);
        }
      }

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

      & + span {
        color: #ccc;

        @include theme-font-color($__common-checkbox-span_disabled_font-color);
        cursor: $cursor-disabled;
      }
    }

    &:hover {
      .#{$checkbox-inner-prefix-cls} {
        border-color: $primary-color;

        @include theme-border-color($__common-checkbox_hover_border-color);
        @include theme-box-shadow($__common-checkbox-inner_hover_box-shadow);
      }
    }

    &-inner {
      display: inline-block;
      width: 14px;
      height: 14px;
      position: relative;
      top: 0;
      left: 0;
      border: 1px solid $mixin-checkbox-inner-border-color;

      @include theme-border-color($__common-checkbox-inner_border-color);
      border-radius: 2px;
      background-color: #fff;
      // transition: border-color $transition-time $ease-in-out, background-color $transition-time $ease-in-out;
      @include theme-background-color($__common-checkbox-inner_background-color);

      &::after {
        content: "";
        display: table;
        width: 4px;
        height: 8px;
        position: absolute;
        top: 1px;
        left: 4px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        // transform: rotate(45deg) scale(0);
        // transition: all $transition-time $ease-in-out;
        @include theme-border-color($__common-checkbox-inner_after_border-color);
      }
    }

    &-large {
      & .#{$checkbox-inner-prefix-cls} {
        width: 16px;
        height: 16px;

        &::after {
          width: 5px;
          height: 9px;
        }
      }
      .#{$checkbox-prefix-cls}-checked {
        .#{$checkbox-inner-prefix-cls} {
          &::after {
            width: 5px;
            height: 9px;
          }
        }
      }
      .#{$checkbox-prefix-cls}-indeterminate {
        .#{$checkbox-inner-prefix-cls}:after {
          width: 10px;
          top: 6px;
        }
      }
    }

    &-small {
      font-size: $font-size-small;
      & .#{$checkbox-inner-prefix-cls} {
        width: 12px;
        height: 12px;

        &::after {
          top: 0;
          left: 3px;
        }
      }
      .#{$checkbox-prefix-cls}-checked {
        .#{$checkbox-inner-prefix-cls} {
          &::after {
            top: 0;
            left: 3px;
          }
        }
      }
      .#{$checkbox-prefix-cls}-indeterminate {
        .#{$checkbox-inner-prefix-cls}:after {
          width: 6px;
          top: 4px;
        }
      }
    }

    &-input {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      z-index: 1;
      cursor: pointer;
      opacity: 0;

      &[disabled] {
        cursor: $cursor-disabled;
      }
    }

    &-inner-focus {
      @include active();
      // 覆盖active()中的边框色和阴影。
      @include theme-border-color($__common-checkbox-inner_focus_border-color);
      @include theme-box-shadow($__common-checkbox-inner_focus_box-shadow);
    }
  }

  // 选中状态
  .#{$checkbox-prefix-cls}-checked {
    &:hover {
      .#{$checkbox-inner-prefix-cls} {
        border-color: $primary-color;

        @include theme-border-color($__common-checkbox_checked-hover_border-color);
      }
    }

    .#{$checkbox-inner-prefix-cls} {
      border-color: $primary-color;
      background-color: $primary-color;

      @include theme-border-color($__common-checkbox-inner_checked_border-color);
      @include theme-background-color($__common-checkbox-inner_checked_background-color);

      &::after {
        content: "";
        display: table;
        width: 4px;
        height: 8px;
        position: absolute;
        top: 1px;
        left: 4px;
        border: 2px solid #fff;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(1);
        // transition: all $transition-time $ease-in-out;
        @include theme-border-color($__common-checkbox-inner_checked-after_border-color);
      }
    }
  }
  // .#{$checkbox-prefix-cls}-large {
  // }
  // .#{$checkbox-prefix-cls}-small {
  // }

  .#{$form-item-prefix-cls}-changed {
    .#{$checkbox-prefix-cls}-checked {
      &:hover {
        .#{$checkbox-inner-prefix-cls} {
          border-color: $changed-color;

          @include theme-border-color($__common-form-grid-item-changed-checkbox_checked-hover_border-color);
          @include theme-box-shadow($__common-form-grid-item-changed-checkbox_checked-hover_box-shadow);
        }
      }
      .#{$checkbox-inner-prefix-cls} {
        border-color: $changed-color;
        background-color: $changed-color;

        @include theme-border-color($__common-form-grid-item-changed-checkbox-inner_checked_border-color);
        @include theme-background-color($__common-form-grid-item-changed-checkbox-inner_checked_background-color);
      }
    }
  }

  // // 禁用
  // .#{$checkbox-prefix-cls}-disabled {
  // }

  // 半选状态
  .#{$checkbox-prefix-cls}-indeterminate {
    .#{$checkbox-inner-prefix-cls}:after {
      content: "";
      width: 8px;
      height: 1px;
      transform: scale(1);
      position: absolute;
      left: 2px;
      top: 5px;

      @include theme-border-color($__common-checkbox-inner-after_indeterminate_border-color);
    }

    &:hover {
      .#{$checkbox-inner-prefix-cls} {
        border-color: $primary-color;

        @include theme-border-color($__common-checkbox_indeterminate-hover_border-color);
      }
    }
    .#{$checkbox-inner-prefix-cls} {
      background-color: $primary-color;
      border-color: $primary-color;

      @include theme-border-color($__common-checkbox-inner_indeterminate_border-color);
      @include theme-background-color($__common-checkbox-inner_indeterminate_background-color);
    }
  }

  .#{$checkbox-prefix-cls}-disabled.#{$checkbox-prefix-cls}-indeterminate {
    .#{$checkbox-inner-prefix-cls} {
      @include theme-border-color($__common-checkbox-inner_indeterminate-disabled_border-color);
      @include theme-background-color($__common-checkbox-inner_indeterminate-disabled_background-color);

      &::after {
        @include theme-border-color($__common-checkbox-inner-after_indeterminate-disabled_border-color);
      }
    }
  }

  .#{$checkbox-prefix-cls}-wrapper {
    cursor: pointer;
    display: inline-block;
    margin-left: 3px;

    @if $--size-switch == yes {
      font-size: $--size-font-size-base;
      border-style: solid;
      border-color: transparent;
      @include computed-height($--size-height-base, 0);
      // padding: 0;
    } @else {
      font-size: $font-size-small;
      line-height: 1;
    }

    @include theme-font-color($__common-checkbox_font-color);
    @include structure-font-size($__checkbox-default_font-size, 0);

    &-disabled {
      cursor: $cursor-disabled;
    }

    .#{$css-prefix}icon {
      @if $--size-switch == yes {
        line-height: $--size-font-size-base;
      }
      @include theme-font-color($__common-checkbox-icon_font-color);
    }
  }

  .#{$checkbox-prefix-cls}-wrapper + span,
  .#{$checkbox-prefix-cls} + span {
    margin-left: 4px;
    margin-right: 4px;
  }

  .#{$checkbox-prefix-cls}-group {
    &-item {
      display: inline-block;
    }

    & ~ .verify-tip.verify-bottom {
      margin-top: -5px;
    }
  }
  .#{$checkbox-prefix-cls}-group-vertical {
    display: inline-block;
    vertical-align: middle;
    .#{$checkbox-prefix-cls}-wrapper {
      display: block;
      @if $--size-switch == no {
        height: 30px;
        line-height: 30px;
      }
    }
  }
}

@mixin hover-error() {
  border-color: $error-color;

  @include theme-border-color($__common-checkbox-error_hover_border-color);
}

@mixin checkbox-error() {
  $checkbox-inner-prefix-cls: "#{$checkbox-prefix-cls}-inner";
  .#{$checkbox-inner-prefix-cls} {
    border: 1px solid $error-color;

    @include theme-border-color($__common-checkbox-error_border-color);
  }

  &:hover {
    @include hover-error;
    .#{$checkbox-inner-prefix-cls} {
      @include theme-box-shadow($__common-checkbox-error_box-shadow);
      @include theme-border-color($__common-checkbox-error_hover_border-color);
    }
  }
}