.mc-checkbox {
  font-size: 14px;
  &.is-inline{
    display: inline-block;
    &+&{
      margin-left: 10px;
    }
  }
  input[type="checkbox"]{
    opacity: 0;
    position: absolute;
    &:checked + label{
      .mc-checkbox_tick{
        opacity: 1;
        transform: rotate(45deg) scaleY(1);
      }
    }
  }
  .mc-checkbox_inner {
    @extend %transition-all;
    @include radius;
    position: relative;
    top: 3px;
    display: inline-block;
    margin-right: 5px;
    border: 1px solid $line;
    width: 16px;
    height: 16px;
    background: #fff;
    overflow: hidden;
    .mc-checkbox_tick {
      box-sizing: content-box;
      content: "";
      border: 2px solid $blue;
      border-left: 0;
      border-top: 0;
      width: 4px;
      height: 10px;
      position: absolute;
      top: 1px;
      left: 5px;
      transform: rotate(45deg) scaleY(0);
      -webkit-transition: all .2s;
      -moz-transition: all .2s;
      -ms-transition: all .2s;
      -o-transition: all .2s;
      transition: all .2s;
    }
  }
  &:hover{
    .mc-checkbox_inner{
      border-color:$blue;
    }
  }
  &.is-disabled{
    label{
      // opacity: .6;
      cursor: not-allowed;
    }
    .mc-checkbox_inner{
      background-color: $disable-bg;
      border-color: $disable-line;
    }
    input[type="checkbox"]{
      &:checked + label{
        .mc-checkbox_tick{
          border-color: $disable-line;
        }
      }
    }
  }
}