<commit_before>.checkbox {
  position: absolute;
  opacity: 0;
  // custom boxes (decorating the label)
  &:focus, &:active, &:checked {
    + .checkbox-label {
      background-color: $color-bg-box-hover;
    }
  }
  &:checked, &:focus:checked {
    + .checkbox-label {
      &:after {
        border-color: $color-accentuation-red;
      }
      &:before {
        content: url(../img/red_tick.svg);
        top: 13px;
        left: 20px;
      }
    }
    + .checkbox--inactive {
      &:after {
        border-color: $color-text-light;
      }
      &:before {
        color: $color-text-light;
      }
    }
  }
}

.poll-option__radio {
  // for accessibility -> no hiding!
  position: absolute;
  opacity: 0; // height: 0; width: 0; margin: 0; padding: 0; border: 0;
  &:focus, &:active {
    + .poll-option-label {
      background-color: $color-bg-box-hover;
      &:after {
        background-color: $color-bg-box-hover;
      }
      &--selected:after {
        border: solid 1px $color-accentuation-red;
        background-color: transparent;
      }
    }
  }
}

.checkbox-label {
  @include button-label;

  &:before, &:after {
    content: "";
    position: absolute;
  }
  &:after {
    top: 17px;
    left: 16px;
    width: 16px;
    height: 16px;
    border: solid 1px $color-text-light;
  }
  &.checkbox--inactive:hover {
      background-color: $color-bg-box;
  }
}

.checkbox--inactive {
  opacity: .48;
}
.checkbox--on-error {
  color: $color-accentuation-red;<commit_msg>"typo"<commit_after>.checkbox {
  position: absolute;
  opacity: 0;
  // custom boxes (decorating the label)
  &:focus, &:active, &:checked {
    + .checkbox-label {
      background-color: $color-bg-box-hover;
    }
  }
  &:checked, &:focus:checked {
    + .checkbox-label {
      &:after {
        border-color: $color-accentuation-red;
      }
      &:before {
        content: url(../img/red_tick.svg);
        top: 13px;
        left: 20px;
      }
    }
    + .checkbox--inactive {
      &:after {
        border-color: $color-text-light;
      }
      &:before {
        color: $color-text-light;
      }
    }
  }
}

.checkbox-label {
  @include button-label;

  &:before, &:after {
    content: "";
    position: absolute;
  }
  &:after {
    top: 17px;
    left: 16px;
    width: 16px;
    height: 16px;
    border: solid 1px $color-text-light;
  }
  &.checkbox--inactive:hover {
      background-color: $color-bg-box;
  }
}

.checkbox--inactive {
  opacity: .48;
}
.checkbox--on-error {
  color: $color-accentuation-red;
{'fraction_non_alphanumeric': 0.1624405705229794, 'fraction_numerical': 0.015451664025356577, 'mean_word_length': 2.0312124849939974, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 4, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2882781', 'n_tokens_mistral': 950, 'n_tokens_neox': 908, 'n_words': 165}