Почему не кликается чекбокс?

.checkbox-wrapper
  input(type='checkbox' id='checkbox100' name='checkbox').checkbox__input
  span.checkbox--custom
  label(for='checkbox100').checkbox text

.checkbox-wrapper {
  display: flex;
}

.checkbox {
  font-size: 16px;
  line-height: 1.88;
  letter-spacing: 1px;
  color: white;
  position: relative;
  top: -5px;
  color: black;

  &__input {
    display: none;

    &:checked + .checkbox--custom:before,
    &.active + .checkbox--custom:before {
      content: '';
      display: block;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23E95E5E' fill-rule='evenodd' d='M7.879 13.657l8.131-8.132a.5.5 0 1 1 .708.707l-8.486 8.486a.5.5 0 0 1-.707 0l-4.243-4.243a.5.5 0 0 1 .708-.707l3.889 3.889z'/%3E%3C/svg%3E%0A");
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      min-width: 20px;
      height: 20px;
      top: 0;
      right: 0;
      bottom: 0;
      left: -1px;
      margin: auto;
      z-index: 10000;
    }

    &:checked + .checkbox--custom,
    &.active + .checkbox--custom {
      border: 1px solid white;

      &:hover {
        border: 1px solid red;
      }
    }
  }

  &--custom {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    min-width: 20px;
    height: 20px;
    border: 1px solid black;
    position: relative;
    transition: all 0.3s;
    margin-right: 20px;

    &:hover {
      border: 1px solid red;
    }
  }
}