@import "../common/varible";
@import "../common/function";

.yu-checkbox {
  font-family: $font-family;
  font-size: $normal;
  color: $text;
  cursor: pointer;
  margin-right: $space;

  & > span {
    @include unselectable();
  }
  & > .checkbox {
    transition: background-color $transition-time;
    margin-right: $space-tiny;
    margin-bottom: -2px;
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 1px solid $border-dark;
    border-radius: 2px;
    background-color: #fff;
    &:hover {
      border: 1px solid $primary;
    }
    & > input {
      display: none;
    }
  }
  &.checked {
    & > .checkbox {
      position: relative;
      border: 1px solid $primary;
      border-radius: 2px;
      background-color: $primary;
      &:after {
        content: '\00a0';
        display: inline-block;
        border: 2px solid #fff;
        border-top-width: 0;
        border-right-width: 0;
        width: 8px;
        height: 4px;
        -webkit-transform: rotate(-50deg);
        position: absolute;
        top: 3px;
        left: 2px;
      }
    }
  }

  &.checked.disabled {
    & > .checkbox {
      border: 1px solid $text-lighter;
      background-color: $text-lighter;
      & + span {
        color: $text-lighter;
      }
    }
  }
  &.disabled {
    color: $text-lighter;
    & > .checkbox:hover {
      border: 1px solid $border-dark;
    }
  }

  &.control {
    display: block;
    margin-bottom: $space-small;
    &.part {
      & > .checkbox {
        position: relative;
        border: 1px solid $primary;
        border-radius: 2px;
        background-color: $primary;
        & + span {
          color: $primary;
        }
        &:after {
          content: '\00a0';
          display: inline-block;
          border: 2px solid #fff;
          border-top-width: 0;
          border-right-width: 0;
          border-left-width: 0;
          width: 10px;
          height: 5px;
          -webkit-transform: rotate(180deg);
          position: absolute;
          top: 6px;
          left: 2px;
        }
      }
    }
  }
}

.yu-checkbox-group {
  margin-bottom: $space;
  &.vertical {
    & > .yu-checkbox {
      display: block;
      margin-bottom: $space;
    }
  }
}