$radio-checkbox-size: 1em;

.input-checkbox {
  [type='checkbox'] {
    display: inline;
    position: absolute;
    opacity: 0;
  }

  [type="checkbox"]:checked +,
  &.is-checked {
    label::before {
      border-color: $colour-grey-xdark;
    }
  }

  [type='checkbox']:focus + label::before {
    outline: 2px solid $colour-blue-light;
  }

  label {
    cursor: pointer;
    font-size: 1em;
    position: relative;
    display: block;
    padding-left: 1em * 1.5;

    &::before,
    &::after {
      content: '';
      display: inline-block;
      position: absolute;
      top: 1em * 0.3;
      left: 0;
      width: $radio-checkbox-size;
      height: $radio-checkbox-size;
    }

    &::before {
      border: 2px solid $colour-grey-darkmid;
    }
  }

  [type='checkbox'][disabled] + label,
  [type='checkbox'][read-only] + label {
    color: $colour-form-input-disabled;
    cursor: not-allowed;

    &::before {
      border-color: $colour-form-input-disabled;
    }
  }

  [type='checkbox'][read-only]:focus + label::before {
    outline: 0;
  }

  [type='radio'] + .label--hidden,
  [type='checkbox'] + .label--hidden {
    text-indent: -999em;
    overflow: hidden;
    width: 0;
    padding-left: $radio-checkbox-size * 1.1;
  }

  &--hiddenlabel {
    text-indent: -999%;
  }
}