@import '../../theme/formStyles.less';
@import (reference) '../../theme/index.less';

@checkBoxSize: 1.5em;
@checkBoxSizeSmall: 17px;

.checkBoxContainer {
  display: flex;
  align-items: center;
}
.checkBox {
  position: relative;
  display: flex;
  align-items: center;
  &:not(.large) {
    input[type='checkbox'] {
      width: @checkBoxSizeSmall;
      height: @checkBoxSizeSmall;
    }
    input[type='checkbox']:checked::after {
      border-width: 0 3px 3px 0;
      width: 0.35 * @checkBoxSize;
      height: 12px;
      margin-top: -3px;
    }
    input[type='checkbox']:indeterminate::after {
      width: 0.5 * @checkBoxSizeSmall;
    }
  }
  input[type='checkBox'] {
    appearance: none;
  }

  // the checkBox itself
  .prettyCheckBox {
    .basicInputStyle;
    align-items: center;
    display: flex;
    height: @checkBoxSize;
    justify-content: center;
    margin: 0;
    padding: 3px;
    width: @checkBoxSize;

    &:disabled {
      .disabled;
    }
  }

  // half the checkmark the short part
  .prettyCheckBox:checked::after {
    border-width: 0;
    height: 12px;
  }
  input[type='checkbox']:checked::after {
    content: '';
    display: block;
    width: 0.4 * @checkBoxSize;
    height: 0.7 * @checkBoxSize;
    border: solid @white;
    border-width: 0 4px 4px 0;
    transform: rotate(40deg);
    box-shadow: 0.5px 0.5px 0.5px @sbm-blue-link;
    margin-top: -3px;
  }
  input[type='checkbox']:checked,
  input[type='checkbox']:indeterminate {
    background: @sbm-blue;
    border: 1px solid @blue-01;
  }
  input[type='checkbox']:indeterminate::after {
    content: '';
    display: block;
    width: 0.6 * @checkBoxSize;
    border-top: solid @white 3px;
    box-shadow: 0.5px 0.5px 0.5px @sbm-blue-link;
  }
}