@import 'common/var.scss';

.qf-checkbox {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  user-select: none;

  .qf-checkbox-lebel {
    margin-left: 12px;
    color: #303133;
    font-size: 14px;
  }

  .qf-checkbox-input {
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    display: inline-block;
    line-height: 1;
    position: relative;
    vertical-align: middle;

    &.is-indeterminate .qf-checkbox-inner {
      &:before {
        content: "";
        position: absolute;
        display: block;
        background-color: $--color-primary;
        height: 5px;
        transform: scale(.5);
        left: 0;
        right: 0;
        top: 6px;
      }
    }

    &.is-checked .qf-checkbox-inner {
      &:after {
        transform: rotate(45deg) scaleY(1);
        box-sizing: content-box;
        content: "";
        border: 3px solid $--color-primary;
        border-left: 0;
        border-top: 0;
        height: 9px;
        left: 6px;
        position: absolute;
        top: 2px;
        width: 3px;
        transition: transform .15s cubic-bezier(.71, -.46, .88, .6) .05s;
        /*-webkit-backface-visibility: hidden;*/
        /*-webkit-transform-style: preserve-3d;*/
        transform-origin: center;
      }
    }

    &.is-disabled .qf-checkbox-inner {
      background-color: $--color-bg;

      &:after {
        border-color: $--color-font-light-3;
      }
    }

    .qf-checkbox-inner {
      display: inline-block;
      position: relative;
      border: 1px solid $--color-border;
      border-radius: 4px;
      box-sizing: border-box;
      width: 20px;
      height: 20px;
      background-color: #fff;
      z-index: 1;
      transition: border-color .25s cubic-bezier(.71, -.46, .29, 1.46), background-color .25s cubic-bezier(.71, -.46, .29, 1.46);
      /*-webkit-backface-visibility: hidden;*/
      /*-webkit-transform-style: preserve-3d;*/
    }

    .qf-checkbox-original {
      opacity: 0;
      outline: none;
      position: absolute;
      margin: 0;
      width: 0;
      height: 0;
      left: -999px;
    }
  }
}