$title-font-size: var(--wds-page-section-title-font-size, var(--wds-font-size-heading-3));
$title-font-weight: var(--wds-page-section-title-font-weight, var(--wds-font-weight-heading-3));
$title-line-height: var(--wds-page-section-title-line-height, var(--wds-font-line-height-heading-3));
$title-letter-spacing: var(--wds-page-section-title-letter-spacing, var(--wds-font-letter-spacing-heading-3));
$subtitle-font-size: var(--wds-page-section-subtitle-font-size, var(--wds-font-size-body-tiny));
$subtitle-line-height: var(--wds-page-section-subtitle-line-height, var(--wds-font-line-height-body-tiny));

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

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

  &__title-column {
    gap: var(--wds-page-section-gap, var(--wds-space-50));
  }

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