.page-header {
  column-gap: var(--wds-page-header-title-actions-gap, var(--wds-space-1000));

  &__breadcrumbs-container > [data-size='small'] {
    margin-inline-start: var(--wds-page-header-breadcrumbs-offset-small, -8px);
  }

  &__breadcrumbs-container > [data-size='medium'] {
    margin-inline-start: var(--wds-page-header-breadcrumbs-offset-medium, -8px);
  }

  &__breadcrumbs-container > [data-size='large'] {
    margin-inline-start: var(--wds-page-header-breadcrumbs-offset-large, -8px);
  }

  & &__title-container#{&}__title-container--minimised &__title {
    font-size: var(--wds-page-header-title-minimised-font-size, var(--wds-font-size-heading-3));
    font-weight: var(--wds-page-header-title-minimised-font-weight, var(--wds-font-weight-heading-3));
    line-height: var(--wds-page-header-title-minimised-line-height, var(--wds-font-line-height-heading-3));
    letter-spacing: var(--wds-page-header-title-minimised-letter-spacing, var(--wds-font-letter-spacing-heading-3));
  }

  &__title-row#{&}__title-row--with-back-button {
    gap: var(--wds-page-header-back-button-gap, var(--wds-space-200));
  }

  &#{&} #{&}__title {
    font-size: var(--wds-page-header-title-font-size, var(--wds-font-size-heading-2));
    font-weight: var(--wds-page-header-title-font-weight, var(--wds-font-weight-heading-2));
    line-height: var(--wds-page-header-title-line-height, var(--wds-font-line-height-heading-2));
  }

  &__subtitle-wrapper {
    margin-top: var(--wds-page-header-subtitle-gap, var(--wds-space-150));
  }

  &#{&} #{&}__subtitle-wrapper #{&}__subtitle {
    font-size: var(--wds-page-header-subtitle-font-size, var(--wds-font-size-body-small));
    line-height: var(--wds-page-header-subtitle-line-height, var(--wds-font-line-height-body-small));
  }

  &__breadcrumbs-container [data-size='medium'] [data-hook^='breadcrumb-clickable-'] [data-hook='breadcrumbs-item'] {
    font-size: var(--wds-page-header-breadcrumbs-font-size, var(--wds-font-size-200));
  }

  &__breadcrumbs-container [data-skin='onGrayBackground'] [data-active='false'] [data-hook^='breadcrumb-clickable-'] [data-hook='breadcrumbs-item']:not([data-skin='disabled']) {
    color: var(--wds-page-header-breadcrumbs-color, var(--wds-color-black-300));
  }
}