.sidebar-header {
  padding: 27px 24px;
  box-sizing: border-box;

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

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

  /* four classes on the slot: Text's own `size`+`weight` typography rule is
     three, and these have to outrank it the way the Stylable
     `:size():weight()` selectors did */
  &#{&}#{&} &__title {
    font-family: var(
      --wds-font-family-default,
      var(
        --wsr-font-family,
        Madefor,
        'Helvetica Neue',
        Helvetica,
        Arial,
        'メイリオ',
        'meiryo',
        'ヒラギノ角ゴ pro w3',
        'hiragino kaku gothic pro',
        sans-serif
      )
    );
    font-size: var(--wds-font-size-body-tiny, var(--wsr-text-font-size-tiny, 12px));
    font-weight: var(--wds-font-weight-bold, var(--wsr-font-weight-bold, 700));
    line-height: var(
      --wds-font-line-height-body-tiny,
      var(--wsr-text-line-height-tiny, 15px)
    );
    letter-spacing: var(--wds-font-letter-spacing-0, unset);
    font-size: 20px;
    line-height: 24px;
  }

  &#{&}#{&} &__subtitle {
    margin-top: 3px;
    line-height: 18px;
  }
}