.lh-checkbox{
  display: inline-block;
  position: relative;
  user-select: none;
  cursor: pointer;
  + .lh-checkbox{
    margin-left: 14px;
  }
  .lh-checkbox-outbox{
    display: inline-block;
    position: relative;
    float: left;
    cursor: pointer;
    outline: none;
    margin-top: 3px;
    .lh-checkbox-innerbox{
      position: relative;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 16px;
      height: 16px;
      background-color: #ffffff;
      border-radius: 2px;
      border: solid 1px @color_b5;
      transition: all .2s;
      cursor: pointer;
      &::after{
        content: '';
        position: absolute;
        width: 8px;
        top:5px;
        height: 3px;
        border: 2px solid #fff;
        border-left: 0;
        border-top: 0;
        transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(0);
        transition: transform .2s;
      }
      &.indeterminate{
        background-color: #fff;
        &::after {
          content: "";
          position: absolute;
          display: block;
          background-color: @color_theme6;
          border-color: @color_theme6;
          border: none;
          height: 8px;
          transform: translateY(-50%) translateX(-50%);
          left: 50%;
          top: 50%;
          width: 8px;
        }
      }
    }
    .lh-checkbox-input{
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      visibility: hidden;
      z-index: -10;
      outline: none;
    }
  }
  .lh-checkbox-text{
    font-size: 14px;
    color: @color_b1;
    padding-left: 8px;
    height: 22px;
    line-height: 22px;
    float: left;
  }
  &.checked{
    .lh-checkbox-outbox {
      .lh-checkbox-innerbox{
        background-color: @color_theme6;
        border-color: @color_theme6;
        &::after{
          transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(1);
        }
      }
    }
  }
  &.disabled{
    cursor: not-allowed;
    .lh-checkbox-outbox {
      .lh-checkbox-innerbox{
        background-color:@color_b7;
        border: solid 1px @color_b5;
        cursor: not-allowed;
        &::after{
          border-color: @color_b4;
        }
        &.indeterminate{
          background-color:@color_b7;
          border: solid 1px @color_b5;
          &::after {
            background-color: @color_b4;
            border-color: @color_b4;
          }
        }
      }
    }
    .lh-checkbox-text{
      color: @color_b4;
    }
  }
  &.mini{
    .lh-checkbox-outbox {
      .lh-checkbox-innerbox{
        width: 14px;
        height: 14px;
        margin-top: 1px;
        &.indeterminate{
          &::after {
            height: 6px;
            width: 6px;
          }
        }
      }
    }
    .lh-checkbox-text{
      font-size: 12px;
    }
    &.checked{
      .lh-checkbox-outbox {
        .lh-checkbox-innerbox{
          &::after{
            top:4px;
            transform:translateY(-2px) rotateY(180deg) rotateZ(45deg) scale(0.9);
          }
        }
      }
    }
  }
  &.big{
    .lh-checkbox-outbox {
      .lh-checkbox-innerbox{
        width: 20px;
        height: 20px;
        border-radius:2px;
        margin-top: 1px;
        &.indeterminate{
          &::after {
            height: 6px;
            width: 6px;
          }
        }
      }
    }
    .lh-checkbox-text{
      font-size: 16px;
    }
    &.checked{
      .lh-checkbox-outbox {
        .lh-checkbox-innerbox{
          &::after{
            top:4px;
            transform:translateY(1px) rotateY(180deg) rotateZ(45deg) scale(1.2);
          }
        }
      }
    }
  }

  //圆形checkbox按钮。火狐下面，周游说有锯齿，真服了。只能把border隐藏一下
  &.circle {
    .lh-checkbox-outbox {
      .lh-checkbox-innerbox {
        border-radius: 50% !important;
      }
    }
    &.checked {
      .lh-checkbox-outbox {
        .lh-checkbox-innerbox {
          border: none;
          &::after{
            transform:translateY(0px) rotateY(180deg) rotateZ(45deg) scale(1);
          }
        }
      }
    }
    &.big{
      &.checked{
        .lh-checkbox-outbox {
          .lh-checkbox-innerbox{
            &::after{
              top:4px;
              transform:translateY(2px) rotateY(180deg) rotateZ(45deg) scale(1.2);
            }
          }
        }
      }
    }
    &.mini{
      &.checked{
        .lh-checkbox-outbox {
          .lh-checkbox-innerbox{
            &::after{
              top:4px;
              transform:translateY(-1px) rotateY(180deg) rotateZ(45deg) scale(0.9);
            }
          }
        }
      }
    }
  }



  &:not(.disabled):hover{
    .lh-checkbox-innerbox{
      border-color:@color_theme6;
    }
  }
}