$dark-text: var(
  --wds-sidebar-header-text-dark-default,
  var(--wds-color-text-standard-primary-light, var(--wsr-color-D80, #ffffff))
);

.sidebar-header-next {
  padding: 27px 24px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 3px;

  &--skin-dark {
    background-color: var(--wds-sidebar-item-level-1-fill-dark-default, #131720);
    color: var(--wds-sidebar-item-text-dark-default, var(--wds-color-black-550, #cfd0d2));
  }

  &--skin-light {
    background-color: var(
      --wds-sidebar-item-level-1-fill-light-default,
      var(--wds-color-white, var(--wsr-color-D80, #ffffff))
    );
    color: var(
      --wds-sidebar-header-text-dark-default,
      var(--wds-color-text-standard-primary-light, var(--wsr-color-D20, #333853))
    );
  }

  &--skin-neutral {
    background-color: var(
      --wds-sidebar-item-level-1-fill-neutral-default,
      var(--wds-color-black-700, var(--wsr-color-D70, #eceff3))
    );
    color: var(
      --wds-sidebar-header-text-dark-default,
      var(--wds-color-text-standard-primary-light, 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-size: 20px;
    line-height: 24px;
  }

  &#{&}#{&}--skin-dark &__title {
    color: $dark-text;
  }

  &#{&}#{&}--skin-dark &__subtitle {
    color: $dark-text;
  }

  &#{&}#{&}--skin-dark &__subtitle * {
    color: $dark-text;
  }
}