*,
.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;
    margin: 0.1em;
  }

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

  &.disabled {
    opacity: 0.33;

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