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

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

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

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

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

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

  &--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-200, 8px));
    padding-bottom: var(--wds-section-header-padding-vertical-medium, var(--wds-space-200, 8px));
  }

  &--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));
  }
}
