// checkbox
.checkbox {
  position: relative;
  display: inline-block;
  margin: 0;
  font-weight: normal !important;
  cursor: pointer;
  user-select: none;
  vertical-align: middle;
  input {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    visibility: hidden;

    &:checked + .checkbox-addon {
      border-color: $checkbox-addon-checked-color;
      background-color: $checkbox-addon-checked-color;
      i {
        transform: scale($checkbox-addon-scale);
        color: $checkbox-addon-bg-color;
      }
      &:hover {
        border-color: $checkbox-addon-hover-color;
        background-color: $checkbox-addon-hover-color;
      }
      &:active {
        border-color: $checkbox-addon-press-color;
        background-color: $checkbox-addon-press-color;
      }
    }

    &:disabled + .checkbox-addon {
      cursor: not-allowed;
      opacity: 0.2;
      & + .checkbox-label {
        cursor: not-allowed;
        color: $checkbox-addon-disabled-color;
      }
    }
    &:disabled:not(:checked) + .checkbox-addon {
      opacity: 1;
      background-color: $gray-lighter;
    }

    &:not(:checked):not(:disabled) + .checkbox-addon {
      &:hover {
        border-color: $checkbox-addon-hover-color;
      }
      &:active {
        border-color: $checkbox-addon-press-color;
      }
    }
  }

  @at-root #{&}-indeterminate {
    > .checkbox-addon {
      border-color: $checkbox-addon-checked-color;

      &:hover {
        border-color: $checkbox-addon-hover-color;
      }
      &:active {
        border-color: $checkbox-addon-press-color;
      }
      &::before {
        position: absolute;
        width: round($checkbox-indeterminate-i-size * $font-size-root);
        height: round($checkbox-indeterminate-i-size * $font-size-root);
        border-radius: 1px;
        top: $checkbox-addon-offset-x;
        left: $checkbox-addon-offset-y;
        transition: $checkbox-addon-transtion;
        display: block;
        content: '';
        background-color: $checkbox-addon-checked-color;
        &:hover {
          background-color: $checkbox-addon-hover-color;
        }
        &:active {
          background-color: $checkbox-addon-press-color;
        }
      }
      i {
        display: none;
      }
    }
    > input:disabled + .checkbox-addon {
      opacity: 0.2 !important;
    }
  }
}
.checkbox-label {
  user-select: none;
  vertical-align: middle;

  &:not(:empty) {
    padding-left: $checkbox-label-space-x;
  }
}
.checkbox-inline {
  display: inline-block;
  user-select: none;

  .checkbox:not(:last-child) {
    margin-right: $checkbox-space-x;
  }
}
.checkbox-vertical {
  display: block;
  user-select: none;

  .checkbox:not(:last-child) {
    display: block;
    margin-bottom: $checkbox-space-x;
  }
}
.checkbox-addon {
  position: relative;
  display: inline-block;
  line-height: 1;
  width: round($checkbox-addon-size * $font-size-root);
  height: round($checkbox-addon-size * $font-size-root);
  transition: $checkbox-addon-transtion;
  vertical-align: middle;
  border: $checkbox-addon-border-width solid $checkbox-addon-border-color;
  border-radius: $checkbox-addon-border-radius;
  i {
    position: absolute;
    display: block;
    width: round($checkbox-addon-size * $font-size-root);
    height: round($checkbox-addon-size * $font-size-root);
    transition: $checkbox-addon-transtion;
    transform: scale(0);
    transform-origin: 50% 50%;
    top: round($checkbox-addon-size  -$checkbox-addon-i-size) * $font-size-root / 2 - 1;
    left: round($checkbox-addon-size  -$checkbox-addon-i-size) * $font-size-root / 2 - 1;
    color: transparent;
  }
}
