.#{$checkbox-prefix-cls}{
  height: $checkbox-size;
  position: relative;
  display: inline-block;
  margin-bottom: 0;// Override the `<label>` default
  font-size: $checkbox-font-size;
  vertical-align: middle;
  cursor: pointer;

  &__inner{
    position: relative;
    display: block;
    padding: $checkbox-padding;
    margin-top: 0;
    user-select: none;

    &::before{
      position: absolute;
      top: 0;
      left: 0;
      width: $checkbox-size;
      height: $checkbox-size;
      padding-left: $checkbox-padding-l;
      overflow: visible;
      font-size: $checkbox-font-size;
      line-height: 100%;
      color: transparent;
      text-align: center;
      text-indent: -3px;
      @extend %aid-icon;
      content: "\F8AE";
      background: $checkbox-bg;
      border: 1px solid $checkbox-border-color;
      border-radius: $checkbox-border-radius;
      transition: all .125s;
    }

    &:empty {
      padding-left: $checkbox-size;
    }
  }

  &__input[type="checkbox"]{
    position: absolute;
    top: 3px;
    z-index: 2;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    visibility: hidden;
  }


  // size
  &--lg {
    @include checkbox-size($checkbox-lg-font-size, $checkbox-lg-size, $checkbox-lg-padding-l);
  }

  &--sm {
    @include checkbox-size($checkbox-sm-font-size, $checkbox-sm-size, $checkbox-sm-padding-l);
  }


  // checked
  &--checked, // class 控制方式
  &__input[type="checkbox"]:checked ~, // input 状态控制方式
  &__input[type="checkbox"][checked] ~ {
    .#{$checkbox-prefix-cls}__inner::before{
      @include active-primary;
      border-color: transparent;
    }
  }

  // indeterminate
  &--indeterminate, // class 控制方式
  &__input[type="checkbox"]:indeterminate ~, // input 状态控制方式
  &__input[type="checkbox"][indeterminate] ~ {
    .#{$checkbox-prefix-cls}__inner::before{
      @include active-primary;
      content: "\F58A";
      border-color: transparent;
    }
  }

  // hover
  @include hover{
    .#{$checkbox-prefix-cls}__inner{
      &::before{
        border-color: $input-border-hover;
      }
    }
  }

  // disabled
  @include status-disabled {
    .#{$checkbox-prefix-cls}__inner{
      cursor: $cursor-disabled;

      &::before{
        border-color: $gray-lightest-18;
        background: $checkbox-disabled-bg;
      }
    }

    // 禁用 选中/半选中 状态
    &.#{$checkbox-prefix-cls}--checked, // class 控制方式
    &.#{$checkbox-prefix-cls}--indeterminate,
    .#{$checkbox-prefix-cls}__input[type="checkbox"]:checked ~, // input 状态控制方式
    .#{$checkbox-prefix-cls}__input[type="checkbox"][checked] ~,
    .#{$checkbox-prefix-cls}__input[type="checkbox"]:indeterminate ~,
    .#{$checkbox-prefix-cls}__input[type="checkbox"][indeterminate] ~ {
      .#{$checkbox-prefix-cls}__inner::before{
        background: $checkbox-border-color;
      }
    }
  }
}


//
// checkbox-group
//

.checkbox-group {
  .#{$checkbox-prefix-cls} {
    display: block;
    margin-bottom: $checkbox-group-space;
  }

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

      &:not(:last-child){
        margin-right: $checkbox-group-inline-space;
      }
    }
  }

  //size
  &--lg{
    .#{$checkbox-prefix-cls}{
      @extend .#{$checkbox-prefix-cls}--lg;
      margin-bottom: $checkbox-group-space-lg;
    }
  }

  &--sm{
    .#{$checkbox-prefix-cls}{
      @extend .#{$checkbox-prefix-cls}--sm;
      margin-bottom: $checkbox-group-space-sm;
    }
  }
}


//
// checkbox-group-button
//

.checkbox-group-button{
  .#{$checkbox-prefix-cls}{
    .#{$checkbox-prefix-cls}__inner {
      position: relative;
      @extend .#{$btn-prefix-cls};
      @extend .#{$btn-prefix-cls}-secondary;
      padding: 0 $checkbox-btn-padding;
      overflow: hidden;

      &::before{
        position: absolute;
        top: auto;
        right: -2px;
        bottom: -3px;
        left: auto;
        z-index: 2;
        width: $checkbox-btn-checked-icon-font-size;
        height: $checkbox-btn-checked-icon-font-size;
        font-size: $checkbox-btn-checked-icon-font-size;
        background: none;
        border: 0;
        transform: scale(.8);
      }

      &::after{
        position: absolute;
        right: -$checkbox-btn-checked-bg-size/2;
        bottom: -$checkbox-btn-checked-bg-size/2;
        z-index: 1;
        display: none;
        width: $checkbox-btn-checked-bg-size;
        height: $checkbox-btn-checked-bg-size;
        content: "";
        background-color: $checkbox-btn-checked-bg-color;
        transform: rotate(45deg);
      }

      &:hover{
        border-color: $brand-primary;
        box-shadow: none;
      }
    }

    &--checked{
      .#{$checkbox-prefix-cls}__inner {
        border-color: $checkbox-btn-checked-border-color;
        &::after{
          display: block;
        }
      }
    }

    @include status-disabled {
      .#{$checkbox-prefix-cls}__inner {
        color: $body-color;
        border-color: $btn-secondary-border;
      }

      // 禁用 选中/半选中 状态
      &.#{$checkbox-prefix-cls}--checked, // class 控制方式
      &.#{$checkbox-prefix-cls}--indeterminate,
      .#{$checkbox-prefix-cls}__input[type="checkbox"]:checked ~, // input 状态控制方式
      .#{$checkbox-prefix-cls}__input[type="checkbox"][checked] ~,
      .#{$checkbox-prefix-cls}__input[type="checkbox"]:indeterminate ~,
      .#{$checkbox-prefix-cls}__input[type="checkbox"][indeterminate] ~ {
        .#{$checkbox-prefix-cls}__inner {
          border-color: $checkbox-btn-checked-border-color;
          &::before{
            background: transparent;
          }
        }
      }
    }
  }

  &.checkbox-group-inline .#{$checkbox-prefix-cls}:not(:last-child){
    margin-right: 0;

    .#{$checkbox-prefix-cls}__inner{
      margin-right: $checkbox-group-space;
    }
  }

  //size
  &.checkbox-group--lg{
    .#{$checkbox-prefix-cls} .#{$checkbox-prefix-cls}__inner{
      @extend .#{$btn-prefix-cls}-lg;
      padding: 0 $checkbox-btn-padding-lg;
    }

    &.#{$checkbox-prefix-cls}-group-inline .#{$checkbox-prefix-cls} .#{$checkbox-prefix-cls}__inner{
      margin-right: $checkbox-group-space-lg;
    }
  }

  &.checkbox-group--sm{
    .#{$checkbox-prefix-cls} .#{$checkbox-prefix-cls}__inner{
      @extend .#{$btn-prefix-cls}-sm;
      padding: 0 $checkbox-btn-padding-sm;
    }

    &.checkbox-group-inline .#{$checkbox-prefix-cls} .#{$checkbox-prefix-cls}__inner{
      margin-right: $checkbox-group-space-sm;
    }
  }

}