.section-header {
  &--horizontal-padding-large {
    padding: 0 var(--wds-list-item-padding-horizontal-large, 24px);
    left: var(--wds-list-item-padding-horizontal-large, 24px);
    right: var(--wds-list-item-padding-horizontal-large, 24px);
  }

  &--horizontal-padding-medium {
    padding: 0 var(--wds-list-item-padding-horizontal-medium, 18px);
    left: var(--wds-list-item-padding-horizontal-medium, 18px);
    right: var(--wds-list-item-padding-horizontal-medium, 18px);
  }

  &--horizontal-padding-small {
    padding: 0 var(--wds-list-item-padding-horizontal-small, 15px);
    left: var(--wds-list-item-padding-horizontal-small, 15px);
    right: var(--wds-list-item-padding-horizontal-small, 15px);
  }

  &--horizontal-padding-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-tiny, 12px);
    left: var(--wds-list-item-padding-horizontal-tiny, 12px);
    right: var(--wds-list-item-padding-horizontal-tiny, 12px);
  }

  &--horizontal-padding-x-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-x-tiny, 6px);
    left: var(--wds-list-item-padding-horizontal-x-tiny, 6px);
    right: var(--wds-list-item-padding-horizontal-x-tiny, 6px);
  }

  &--horizontal-padding-xx-tiny {
    padding: 0 var(--wds-list-item-padding-horizontal-xx-tiny, 3px);
    left: var(--wds-list-item-padding-horizontal-xx-tiny, 3px);
    right: var(--wds-list-item-padding-horizontal-xx-tiny, 3px);
  }

  &--skin-standard {
    --wds-internal-section-header-color-bg: var(--wds-section-header-fill-standard, var(--wds-color-fill-surface-default, #ffffff));
  }

  &--skin-neutral {
    --wds-internal-section-header-color-bg: var(--wds-section-header-fill-neutral, var(--wds-color-fill-surface-default, #ffffff));
  }

  &--skin-light {
    --wds-internal-section-header-color-border: var(--wds-section-header-border-light, var(--wds-color-border-standard-primary, #7896ff));
  }

  &--skin-bold {
    --wds-internal-section-header-color-bg: var(--wds-section-header-fill-standard, var(--wds-color-fill-surface-default, #ffffff));
  }

  &--size-small {
    padding-top: var(--wds-section-header-padding-vertical-small, var(--wds-space-200, 8px));
    padding-bottom: var(--wds-section-header-padding-vertical-small, var(--wds-space-200, 8px));
  }

  &--size-medium {
    padding-top: var(--wds-section-header-padding-vertical-medium, var(--wds-space-300, 12px));
    padding-bottom: var(--wds-section-header-padding-vertical-medium, var(--wds-space-300, 12px));
  }

  /* Ties with the size rules above at one class, so it has to stay last — same ordering constraint as the base sheet. */
  &--skin-bold {
    padding-top: var(--wds-section-header-bold-padding-top, var(--wds-space-500, 20px));
    padding-bottom: var(--wds-section-header-bold-padding-bottom, var(--wds-space-100, 4px));
  }

  &#{&}--skin-neutral &__title-text {
    color: var(--wds-section-header-label-fill-neutral, var(--wds-color-text-placeholder, #525150));
  }

  &#{&}--size-small &__title-text#{&}__title-text {
    font-size: var(--wds-section-header-label-font-size-small, var(--wds-font-size-body-tiny, 12px));
    font-weight: var(--wds-section-header-font-weight, var(--wds-font-weight-semi-bold, 600));
  }

  &#{&}--size-medium &__title-text#{&}__title-text {
    font-size: var(--wds-section-header-label-font-size-medium, var(--wds-font-size-body-small, 14px));
    font-weight: var(--wds-section-header-font-weight, var(--wds-font-weight-semi-bold, 600));
  }

  /*
   * `--wds-section-header-bold-label-font-*` doesn't diverge here, so nothing
   * above needed it — but the base sheet's skin-bold rule has to outrank the
   * size rules above at equal specificity, and the two size overrides just above moved
   * into this bundle, which loads after the base sheet entirely. Repeated
   * verbatim so skin-bold still wins the tie inside this theme too.
   */
  &#{&}--skin-bold &__title-text#{&}__title-text {
    font-family: var(--wds-section-header-bold-label-font-family, var(--wds-font-family-display, var(--wsr-font-family, Madefor, "Helvetica Neue", Helvetica, Arial, "メイリオ", "meiryo", "ヒラギノ角ゴ pro w3", "hiragino kaku gothic pro", sans-serif)));
    font-size: var(--wds-section-header-bold-label-font-size, var(--wds-font-size-body-small, 14px));
    font-weight: var(--wds-section-header-bold-label-font-weight, var(--wds-font-weight-heading-3, 700));
    letter-spacing: var(--wds-section-header-bold-label-font-letter-spacing, var(--wds-font-letter-spacing-heading-3, normal));
    line-height: var(--wds-section-header-bold-label-font-line-height, var(--wds-font-line-height-body-medium, 24px));
  }
}