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

  &#{&}--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-body-small));
    line-height: var(--wds-side-panel-floating-title-font-line-height, var(--wds-font-line-height-body-small));
    letter-spacing: var(--wds-side-panel-title-font-letter-spacing, var(--wds-font-letter-spacing-heading-3));
  }

  & &__title &__standard-title {
    font-size: var(--wds-side-panel-title-font-size, var(--wds-font-size-body-small));
    line-height: var(--wds-side-panel-title-font-line-height, var(--wds-font-line-height-body-small));
  }

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

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