@import '../dao-color.scss';
$checkbox-font-color: $black-dark;
$checkbox-font-disable-color: $grey-dark;
$checkbox-font-size: 14px;
$checkbox-item-margin: 10px;
$checkbox-height: 24px;

.dao-checkbox {
  line-height: $checkbox-height;

  position: relative;

  display: block;
  &.inline {
    display: inline-block;
    &:not(:first-child) {
      margin-left: 15px;
    }
  }
  &.disabled {
    label {
      cursor: not-allowed;

      color: $checkbox-font-disable-color;
    }
  }
  label {
    font-size: $checkbox-font-size;
    font-weight: normal;

    margin-bottom: 0;
    padding-left: 20px;

    cursor: pointer;

    color: $checkbox-font-color;
  }
  input[type='checkbox'] {
    position: absolute;

    margin-top: 5px;
    margin-left: -20px;

    width: $checkbox-font-size;
    height: $checkbox-font-size;

    outline: none;
    &[disabled],
    &.disabled {
      cursor: not-allowed;
    }
  }
  & + .checkbox {
    margin-top: $checkbox-item-margin / 2;
  }
}

.dao-checkbox-group.checkbox-inline {
  .dao-checkbox {
    display: inline-block;
    padding-right: 5px;
    margin-right: 30px;

    &:last-child {
      margin-right: 0;
    }
  }
}

// // 这里有一个圆形的 checkbox
// input[type='checkbox'].round {
//   visibility: hidden;
//   &::before {
//     content: '';
//     transform: translateX(-2px) translateY(-5px);
//     display: inline-block;
//     vertical-align: middle;
//     text-align: center;
//     width: 16px;
//     height: 16px;
//     visibility: visible;
//     border-radius: 4px;
//     box-shadow: 0 0 0 1px #cdd2da inset;
//     background: white;
//   }
// }

// input[type='checkbox'].round.half-check {
//   &::before {
//     content: '—';
//     font-weight: bold;
//     background: $blue;
//     box-shadow: none;
//     color: white;
//     font-size: 12px;
//   }
// }

// input[type='checkbox'].round:checked {
//   &::before {
//     content: '\2713';
//     background: $blue;
//     box-shadow: none;
//     color: white;
//   }
// }