<commit_before>.radio-button {
  position: absolute;
  opacity: 0;

  // custom radio buttons (decorating the label)
  &:focus,
  &:active,
  &:checked {
    + .radio-button-label {
      background-color: $color-bg-box-hover;

      &::after {
        background-color: $color-bg-box-hover;
      }
    }
  }

  &:checked {
    &:focus,
    &:hover {
      + .radio-button-label {
        background-color: #cac8bf;
      }
    }
  }

  &:checked,
  &:focus:checked {
    + .radio-button-label {
      &::after {
        border: solid 1px $color-accentuation-red;
        background-color: transparent;
      }
    }
  }
}

.radio-button-label {
  @include button-label;

  // custom radios
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
  }

  &::before { // border
    top: 21px;
    left: 20px;
    width: 12px;
    height: 12px;
    display: inline-block;
    background-color: $color-accentuation-red;
  }

  &::after { // inside border (hiding the dot)
    top: 17px;
    left: 16px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: $color-bg-box;
    // transition fix:
    transition: background-color 0.2s ease-in-out;
    border: solid 1px $color-text-light;
  }

  &:hover::after,
  &:focus::after { // red dot
    background-color: $color-bg-box-hover;
  }

  &.checkbox--inactive:hover {
    background-color: $color-bg-box;
  }
  // custom radios end here
}

.radio-button--inactive {
  opacity: .48;

  // visible when state changes after the button was activated
  &::before {
    background-color: $color-text-light;
  }

  &::after {
    border: solid 1px $color-text-light !important;
  }
}<commit_msg>Todo: Why !important?<commit_after>.radio-button {
  position: absolute;
  opacity: 0;

  // custom radio buttons (decorating the label)
  &:focus,
  &:active,
  &:checked {
    + .radio-button-label {
      background-color: $color-bg-box-hover;

      &::after {
        background-color: $color-bg-box-hover;
      }
    }
  }

  &:checked {
    &:focus,
    &:hover {
      + .radio-button-label {
        background-color: #cac8bf;
      }
    }
  }

  &:checked,
  &:focus:checked {
    + .radio-button-label {
      &::after {
        border: solid 1px $color-accentuation-red;
        background-color: transparent;
      }
    }
  }
}

.radio-button-label {
  @include button-label;

  // custom radios
  &::before,
  &::after {
    content: '';
    position: absolute;
    border-radius: 50%;
  }

  &::before { // border
    top: 21px;
    left: 20px;
    width: 12px;
    height: 12px;
    display: inline-block;
    background-color: $color-accentuation-red;
  }

  &::after { // inside border (hiding the dot)
    top: 17px;
    left: 16px;
    width: 18px;
    height: 18px;
    display: inline-block;
    background-color: $color-bg-box;
    // transition fix:
    transition: background-color 0.2s ease-in-out;
    border: solid 1px $color-text-light;
  }

  &:hover::after,
  &:focus::after { // red dot
    background-color: $color-bg-box-hover;
  }

  &.checkbox--inactive:hover {
    background-color: $color-bg-box;
  }
  // custom radios end here
}

.radio-button--inactive {
  opacity: .48;

  // visible when state changes after the button was activated
  &::before {
    background-color: $color-text-light;
  }

  &::after {
    border: solid 1px $color-text-light !important; // Todo: Why !important?
  }
}
{'fraction_non_alphanumeric': 0.15312954876273654, 'fraction_numerical': 0.01572052401746725, 'mean_word_length': 2.275500476644423, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '3011086', 'n_tokens_mistral': 1281, 'n_tokens_neox': 1205, 'n_words': 253}