.el-checkbox{
  color:$checkbox-color;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none
}

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

.el-checkbox-inner{
  display: inline-block;
  position: relative;
  border:$checkbox-input-border;
  border-radius: $checkbox-input-border-radius;
  box-sizing: border-box;
  width: $checkbox-input-width;
  height: $checkbox-input-height;
  background-color: $checkbox-input-fill;
  z-index: $index-normal;
  transition: border-color .25s cubic-bezier(0.71,-0.46,0.29,1.46),
              background-color .25s cubic-bezier(0.71,-0.46,0.29,1.46);

  &:not(.is-disabled):hover{
    border-color: $checkbox-input-border-color-hover;
  }

  &::after{
    content:'';
    border:2px solid $checkbox-checked-icon-color;
    border-left: 0;
    border-top: 0;
    height: 8px;
    left: 5px;
    position: absolute;
    top:1px;
    transform: rotate(45deg) scaleY(0);
    width: 4px;
    transition:transform .15s cubic-bezier(0.71,-0.46,0.88,0.6) .05s;
    transform-origin: center;
  }

  &.is-disabled{
    background-color: $checkbox-disabled-input-fill;
    border-color:$checkbox-disabled-input-border-color;
    cursor: not-allowed;

    &::after{
      cursor: not-allowed;
      border-color:$checkbox-disabled-icon-color;
    }

    & + .el-checkbox-label{
      cursor: not-allowed;
    }
  }

  &.is-checked{
    background-color: $checkbox-checked-input-fill;
    border-color:$checkbox-checked-input-border-color;

    &::after{
      transform: rotate(45deg) scaleY(1);
    }
  }

  &.is-focus{
    border-color:$checkbox-input-border-color-hover;
  }

  &.is-disabled.is-checked{
    background-color: $checkbox-disabled-checked-input-fill;
    border-color:$checkbox-disabled-checked-input-border-color;

    &::after{
      border-color:$checkbox-disabled-checked-icon-color;
    }
  }

  &.is-indeterminate{
    background-color: $checkbox-checked-input-fill;
    border-color:$checkbox-checked-input-border-color;

    &::before{
      content:'';
      position:absolute;
      display: block;
      border:1px solid $checkbox-checked-icon-color;
      margin-top:-1px;
      left:3px;
      right:3px;
      top:50%;
    }

    &::after{
      display:none;
    }
  }

  &.is-disabled.is-indeterminate{
    background-color: $checkbox-disabled-checked-input-fill;
    border-color:#2e90fe;

    &::before{
      border-color:$checkbox-disabled-checked-icon-color;
    }
  }
}

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

.el-checkbox-label{
  font-size: 14px;
  padding-left: 5px;
}