$title-font-size: var(--wds-page-section-title-font-size, var(--wds-font-size-heading-4, var(--wsr-heading-font-size-s, 18px)));
$title-font-weight: var(--wds-page-section-title-font-weight, var(--wds-font-weight-heading-4, var(--wsr-font-weight-medium, 530)));
$title-line-height: var(--wds-page-section-title-line-height, var(--wds-font-line-height-heading-4, var(--wsr-heading-line-height-s, 24px)));
$title-letter-spacing: var(--wds-page-section-title-letter-spacing, var(--wds-font-letter-spacing-heading-4, unset));
$subtitle-font-size: var(--wds-page-section-subtitle-font-size, var(--wds-font-size-body-medium, var(--wsr-text-font-size-medium, 16px)));
$subtitle-line-height: var(--wds-page-section-subtitle-line-height, var(--wds-font-line-height-body-medium, var(--wsr-text-line-height-medium, 24px)));

.page-section {
  padding-block-start: var(--wds-page-section-padding-top, var(--wds-space-400, 24px));
  flex-direction: column;
  display: flex;

  &__content {
    display: flex;
    align-items: center;
  }

  &:not(&--show-divider) {
    padding-block-end: var(--wds-page-section-padding-bottom, var(--wds-space-200, 12px));
  }

  &#{&}--show-divider {
    padding-block-end: var(--wds-page-section-padding-bottom-with-divider, var(--wds-space-0, 0));
  }

  &__title-column {
    display: flex;
    flex-direction: column;
    gap: var(--wds-page-section-gap, var(--wds-space-0, 0));
    min-width: 0;
  }

  &#{&} #{&}__title {
    font-size: $title-font-size;
    font-weight: $title-font-weight;
    line-height: $title-line-height;
    letter-spacing: $title-letter-spacing;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  & &__title-column > :has(&__title) {
    font-size: $title-font-size;
    font-weight: $title-font-weight;
    line-height: $title-line-height;
    letter-spacing: $title-letter-spacing;
  }

  &#{&} #{&}__title-column #{&}__subtitle {
    font-size: $subtitle-font-size;
    line-height: $subtitle-line-height;
  }

  /* stylelint-disable-next-line plugin/use-baseline */
  &#{&} #{&}__title-column > :has(#{&}__subtitle) {
    font-size: $subtitle-font-size;
    line-height: $subtitle-line-height;
  }

  &__actions-bar {
    margin-inline-start: auto;
    margin-block-start: auto;
    margin-block-end: auto;
    padding-inline-start: var(--wds-space-400, 30px);
  }

  & #{&}__divider {
    display: var(--wds-page-section-divider-display, block);
    margin-block-start: var(--wds-space-200, 12px);
  }
}