*,
.context,
.ad.hoc {
  &.checkbox {
    appearance: none;
    background: white;
    border: 1px solid gray;
    border-radius: 0.3em;
    cursor: pointer;
    font: inherit;
    height: 1.5em;
    outline: none;
    margin: 0;
    width: 1.5em;

    &:checked {
      &::after {
        background: black;
        border-radius: 0.3em;
        content: "";
        display: block;
        height: 1em;
        margin: 0.2em;
        width: 1em;
      }
    }

    &:focus {
      border-color: blue;
      box-shadow: 0 0 3px 1px lightblue;
    }

    &.indeterminate {
      &::after {
        background: black;
        border-radius: 0.2em;
        content: "";
        display: block;
        height: 0.2em;
        margin: 0.6em 0.2em;
        width: 1em;
      }
    }
  }

  &.container {
    align-items: center;
    display: inline-flex;
    flex-wrap: wrap;
    margin: 0.1em;
  }

  &.label {
    margin: 0 0.6em 0 1.5em;
  }


  // TODO: The default error theming should be double-checked,
  // right now the problem with build script in dev mode pervents me
  // to do it right, see: https://github.com/birdofpreyru/react-utils/issues/466
  &.error &.checkbox {
    border-color: red;

    &:focus {
      box-shadow: 0 0 3px 1px orangered;
    }
  }

  &.errorMessage {
    color: red;
    font-size: 0.8em;
    font-style: italic;
    padding-right: 0.6em;
    text-align: right;
    width: 100%;
  }

  &.disabled {
    opacity: 0.33;

    .checkbox {
      cursor: not-allowed !important;
    }
  }
}