@import "../../styles/mixin";
.#{$prefix}-checkbox {
  display: inline-block;
  position: relative;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 22px;
  height: 24px;
  line-height: 16px;
  vertical-align: middle;
  @include selectxt;
  $this: &;
  margin-right: $space - 3;
  /* + #{$this}{
        margin-left: $space - 3;
    } */
  //hover
  &:hover {
    #{$this}-label {
      &:before {
        border-color: $c5;
      }
    }
  }
  &-o {
    display: none;
    + #{$this}-label {
      cursor: pointer;
      padding-right: 8px;
      &:before,
      &:after {
        content: "";
        position: absolute;
      }
      &:before {
        top: 5px;
        left: 0;
        border: 1px solid $c16;
        width: 12px;
        height: 12px;
        background-color: $c21;
        transition: background-color 300ms;
        border-radius: 2px;
      }
      &:after {
        left: 2px;
        top: 7px;
        width: 8px;
        height: 4px;
        border: solid $c21;
        border-width: 0 0 2px 2px;
        transform: rotate(-45deg) scale(0);
        transition: transform 300ms;
      }
    }
    //checked
    &:checked {
      + #{$this}-label {
        &:before {
          border-color: $c4;
          background-color: $c4;
        }
        &:after {
          transform: rotate(-45deg) scale(1);
        }
      }
    }
    //disabled
    &:disabled {
      + #{$this}-label {
        cursor: no-drop;
        color: $c16;
        &:before {
          border-color: $c18;
          background-color: $c19;
        }
        &:after {
          border-color: $c16;
        }
      }
    }
    /* &:disabled:checked{
            + #{$this}-label{
                color:$c13
            }
        } */
  }
  &-label {
    color: $c13;
    &:empty {
      padding-right: 0;
    }
  }
  //半选
  @at-root .is-indeterminate {
    #{$this}-label {
      &:before {
        border-color: $c4;
        background-color: $c4;
      }
      &:after {
        transform: scale(1);
        border-left-width: 0;
        left: 3px;
      }
    }
  }

  // 文字选框
  &-font {
    padding: 0;
    overflow: hidden;
    height: 30px;

    #{$this}-label {
      border: 1px solid $c16;
      height: 30px;
      line-height: 30px;
      display: inline-block;
      padding: 0 16px 4px;
      background-color: $c21;
      @include border-radius;
      transform: translateZ(0);
      overflow: hidden;
      &:before {
        opacity: 0;
        height: 24px;
        width: 24px;
      }
    }
    &:hover {
      #{$this}-label {
        border-color: $c5;
      }
    }
    #{$this}-o {
      &:checked {
        ~ #{$this}-label {
          color: $c4;
          border-color: $c4;
          &:before,
          &:after {
            opacity: 1;
            left: auto;
            right: 0;
            top: auto;
            bottom: 0;
          }
          &:before {
            transform: rotate(46deg);
            top: 15px;
            right: -12px;
          }
          &:after {
            top: 17px;
          }
        }
      }
      &:disabled {
        ~ #{$this}-label {
          color: $c16;
          border-color: $c18;
          background-color: $c19;
          &:before {
            background-color: $c17;
          }
          &:after {
            border-color: $c21;
          }
        }
      }
    }
  }
}

// 内容选框
.#{$prefix}-itemcheck {
  $this: &;
  &-box {
    // @include clearfix;
    display: inline-block;
    + #{$this}-box {
      margin-left: $space;
    }
    #{$this}-item {
      position: relative;
      border: 1px solid $c17;
      background-color: $c21;
      // width: 130px;
      // height: 130px;
      // display: inline-block;
      overflow: hidden;
      cursor: pointer;
      // margin-bottom: $space;

      &:hover {
        border-color: $c5;
      }
    }
    .#{$prefix}-checkbox-o {
      //checked
      &:checked {
        + #{$this}-item {
          border-color: $c4;
          &:before,
          &:after {
            opacity: 1;

            position: absolute;
            content: "";
          }
          &:before {
            height: 24px;
            width: 24px;
            background-color: $c4;
            transform: rotate(46deg);
            bottom: -12px;
            right: -12px;
          }
          &:after {
            right: 0px;
            bottom: 4px;
            width: 8px;
            height: 4px;
            border: solid $c21;
            border-width: 0 0 2px 2px;
            transform: rotate(-45deg) scale(1);
            transition: transform 300ms;
          }
        }
      }
      //disabled
      &:disabled {
        + #{$this}-item {
          background-color: $c19;
          border-color: $c17;
          cursor: no-drop;
          &.is-checked {
            &:before {
              background-color: $c17;
            }
          }
        }
      }
    }
  }
}