.side-panel-header {
  flex: 0 1 auto;

  &__title-container {
    display: flex;
    align-items: flex-start;
    gap: var(--wds-space-100, 0px);
    padding-block: var(--wds-side-panel-header-padding-vertical, var(--wds-space-300, 18px));
    padding-right: var(--wds-side-panel-header-padding-right, var(--wds-space-200, 12px));
    padding-left: var(--wds-side-panel-header-padding-left, var(--wds-space-400, 24px));
  }

  &__title-container#{&}__title-container--no-close-button {
    padding-right: var(--wds-side-panel-header-padding-right, var(--wds-space-400, 24px));
  }

  &__title-container &__title {
    align-self: center;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    padding-right: var(--wds-side-panel-header-content-padding-right, var(--wds-space-0, 0px));
  }

  & &__title-container &__title &__floating-title {
    font-family: var(
      --wds-side-panel-floating-title-font-family,
      var(
        --wds-font-family-default,
        Madefor,
        'Helvetica Neue',
        Helvetica,
        Arial,
        'メイリオ',
        'meiryo',
        'ヒラギノ角ゴ pro w3',
        'hiragino kaku gothic pro',
        sans-serif
      )
    );
    font-size: var(
      --wds-side-panel-floating-title-font-size,
      var(--wds-font-size-body-medium, 16px)
    );
    line-height: var(
      --wds-side-panel-floating-title-font-line-height,
      var(--wds-font-line-height-body-medium, 24px)
    );
    letter-spacing: var(--wds-side-panel-title-font-letter-spacing, var(--wds-font-letter-spacing-0, unset));
  }

  & &__title &__standard-title {
    font-size: var(
      --wds-side-panel-title-font-size,
      var(--wds-font-size-heading-3, 18px)
    );
    line-height: var(
      --wds-side-panel-title-font-line-height,
      var(--wds-font-line-height-heading-3, 24px)
    );
  }

  & &__title-container &__title &__subtitle {
    font-size: var(
      --wds-side-panel-subtitle-font-size,
      var(--wds-font-size-body-medium, 16px)
    );
    line-height: var(
      --wds-side-panel-subtitle-font-line-height,
      var(--wds-font-line-height-body-medium, 24px)
    );
    font-weight: var(
      --wds-side-panel-subtitle-font-weight,
      var(--wds-font-weight-regular, 400)
    );
    color: var(
      --wds-side-panel-subtitle-fill,
      var(--wds-color-text-standard-secondary, #333853)
    );
  }

  &__button-box {
    display: flex;
    gap: var(--wds-space-50, 0px);
  }

  &__help-icon {
    width: 24px;
    height: 24px;
  }

  /* to vertically align the CloseButton with Header title */
  &__help-button,
  &__close-button,
  &__back-button {
    margin-block: calc(-1 * var(--wds-space-50, 3px));
  }

  &__back-button {
    align-self: flex-start;
    margin-right: var(--wds-space-0, 12px);
  }

  & &__back-button > span {
    width: auto;
  }

  &__close-button {
    align-self: flex-start;
    margin-left: var(--wds-space-0, 12px);
    background-color: var(--wds-close-button-standard-filled-fill, transparent);
  }

  &#{&}--skin-floating &__title-container {
    padding-block: var(--wds-side-panel-floating-header-padding-vertical, var(--wds-space-200, 12px));
    padding-left: var(--wds-side-panel-floating-header-padding-left, var(--wds-space-400, 24px));
    padding-right: var(--wds-side-panel-floating-header-padding-right, var(--wds-space-150, 9px));
  }

  @media (hover: hover) {
    &#{&}--skin-floating#{&}--is-draggable:hover &__title-container {
      cursor: grab;
    }
  }

  &#{&}--skin-floating#{&}--is-draggable:active &__title-container {
    cursor: grabbing;
  }

  &#{&}--skin-floating#{&}--is-draggable &__button-box {
    cursor: auto;
  }

  & &__divider {
    min-height: var(--wds-side-panel-header-divider-height, var(--wds-border-width-100, 1px));
  }
}