.sidebar-section-title {
  display: block;
  padding: 6px 20px;
  box-sizing: border-box;
  cursor: default;

  &--skin-dark {
    background-color: #23263c;
  }

  &--skin-light {
    background-color: var(--wds-color-white, var(--wsr-color-D80, #ffffff));
  }

  &--skin-neutral {
    color: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
    background-color: var(--wds-color-black-700, var(--wsr-color-D70, #eceff3));
  }

  /* four classes: Text's own `size`+`weight` typography rule is three, and this
     has to outrank it the way the Stylable `:size(tiny):weight(bold)` selector
     did */
  &#{&}#{&}#{&} {
    color: var(--wds-color-black-400, var(--wsr-color-D40, #868aa5));
    line-height: 18px;
  }
}