div.alpheios-checkbox-block {
  display: inline-block;
  position: relative;
  overflow: hidden;
  line-height: textsize(22px);

  max-width: textsize(235px);
  vertical-align: top;

  min-height: calc(var(--alpheios-base-ui-size) * 1.7);
}

.alpheios-checkbox-block {
  input[type="checkbox"] {
    opacity: 0;
    position: absolute;
    left: -999px;
  }

  label {
    position: relative;
    display: inline-block;
    user-select: none;
    vertical-align: top;

    /*16px width of fake checkbox + 6px distance between fake checkbox and text*/
    padding-left: textsize(22px);
    padding-top: textsize(2px);

    &::before,
    &::after {
      position: absolute;
      content: "";

      /*Needed for the line-height to take effect*/
      display: inline-block;
    }

    &::before {
      height: textsize(16px);
      width: textsize(16px);

      border: textsize(1px) solid;
      border-radius: textsize(4px);
      left: 0;

      /*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
       *to vertically center it.
       */
      top: textsize(3px);
    }

    &::after {
      height: textsize(5px);
      width: textsize(9px);
      border-left: textsize(2px) solid;
      border-bottom: textsize(2px) solid;

      transform: rotate(-45deg);

      left: textsize(3px);
      top: textsize(6px);
    }
  }

  input[type="checkbox"] + label::after {
    content: none;
  }

  // Unhide on the checked state
  input[type="checkbox"]:checked + label::after {
    content: "";
  }
}