.side-panel-header {
  & &__title-container {
    padding-block: var(--wds-side-panel-header-padding-vertical, var(--wds-space-400));
    padding-right: var(--wds-side-panel-header-padding-right, var(--wds-space-300));
    padding-left: var(--wds-side-panel-header-padding-left, var(--wds-space-400));
  }

  &__title-container &__title {
    padding-right: var(--wds-side-panel-header-content-padding-right, var(--wds-space-200));
  }

  &#{&}--skin-floating &__title-container {
    padding-block: var(--wds-side-panel-floating-header-padding-vertical, var(--wds-space-400));
    padding-left: var(--wds-side-panel-floating-header-padding-left, var(--wds-space-400));
    padding-right: var(--wds-side-panel-floating-header-padding-right, var(--wds-space-300));
  }

  & &__title-container &__title &__floating-title {
    font-family: var(--wds-side-panel-floating-title-font-family, var(--wds-font-family-display));
    font-size: var(--wds-side-panel-floating-title-font-size, var(--wds-font-size-heading-3));
    line-height: var(--wds-side-panel-floating-title-font-line-height, var(--wds-font-line-height-heading-3));
    letter-spacing: var(--wds-side-panel-title-font-letter-spacing, var(--wds-font-letter-spacing-heading-3));
  }

  & &__title-container &__title &__subtitle {
    font-size: var(--wds-side-panel-subtitle-font-size, var(--wds-font-size-body-tiny));
    line-height: var(--wds-side-panel-subtitle-font-line-height, var(--wds-font-line-height-body-tiny));
    font-weight: var(--wds-side-panel-subtitle-font-weight, var(--wds-font-weight-medium));
    color: var(--wds-side-panel-subtitle-fill, var(--wds-color-text-standard-secondary-light));
  }

  &__close-button {
    background-color: var(--wds-close-button-standard-filled-fill, var(--wds-color-fill-dark-secondary));
  }

  & &__divider {
    min-height: var(--wds-side-panel-header-divider-height, 0);
  }
}