$checkmark-stroke: 0.125em;
$checkmark-left: calc(50% - calc($checkmark-stroke * 2));

.form-check-input[type="checkbox"] {
  appearance: none;
  background-color: $white;
  border-color: $primary;
  border-radius: 0.25rem;
  border-style: solid;
  border-width: 1px;
  font-size: inherit;
  height: 1em;
  position: relative;
  transition: all 0.2s ease-in-out;
  vertical-align: text-bottom;
  min-width: 1em;

  &::before {
    border-color: $white;
    border-style: solid;
    border-width: 0;
    position: relative;
    width: 0.5em;
  }

  &:checked::before {
    border-right-width: $checkmark-stroke;
    border-bottom-width: $checkmark-stroke;
    display: block;
    height: .8em;
    left: $checkmark-left;
    transform: rotate(45deg);
  }

  &:indeterminate::before {
    border-bottom-width: $checkmark-stroke;
    display: block;
    height: 100%;
    left: $checkmark-left;
    top: calc(-50% + calc($checkmark-stroke / 2));
  }

  &:disabled {
    opacity: 0.25;
    border-color: shade-color($primary, 10%);
  }

  &:checked,
  &:indeterminate:not([type="radio"]) {
    background-color: $primary;
    border-color: $primary;
  }
}