.pref-container {
  border-width: 1px;
  border-radius: 3px;
  border-style: dashed;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.pref-container .pref-container__label {
  font-weight: bold;
}

.pref-group {
  border-width: 1px;
  border-radius: 3px;
  border-style: ridge;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.pref-group__toggle {
  display: none;
}

.pref-group__label {
  font-weight: bolder;
  font-size: large;
}

.pref-group_toggable .pref-group__toggle {
  display: unset;
}

// Groups that aren't activated yet
.pref-group_toggable .pref-group__toggle ~ .preferences {
  opacity: 0.5;
  pointer-events: none;
}
// Activated groups
.pref-group_toggable .pref-group__toggle:checked ~ .preferences {
  opacity: unset;
  pointer-events: unset;
}

// BEM is used for classes
// https://en.bem.info/methodology/quick-start/

.pref-container {
  border-width: 1px;
  border-radius: 3px;
  border-style: dashed;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.pref-container .pref-container__label {
  font-weight: bold;
}

.pref-group {
  border-width: 1px;
  border-radius: 3px;
  border-style: ridge;
  margin-bottom: 5px;
  margin-top: 5px;
  padding-left: 2px;
  padding-right: 2px;
}

.pref-group__toggle {
  display: none;
}

.pref-group__label {
  font-weight: bolder;
  font-size: large;
}

.pref-group_toggable .pref-group__toggle {
  display: unset;
}

// Groups that aren't activated yet
.pref-group_toggable .pref-group__toggle ~ .preferences {
  opacity: 0.5;
  pointer-events: none;
}
// Activated groups
.pref-group_toggable .pref-group__toggle:checked ~ .preferences {
  opacity: unset;
  pointer-events: unset;
}

Add notice about the class naming choice
Add notice about the class naming choice
