/// Max width for tagline and subtitle and content text.
$page-content-max-width: 500px !default;

/// Max width for header title when text is positioned on the
/// left. For right positioned text the max width has to match the max
/// width of tagline and subtitle to ensure the title is left aligned
/// with those elements.
$page-header-title-max-width: 700px !default;

/// Maximal width for right positioned headlines and content text.
$page-content-position-right-max-width: 500px !default;

/// Maximal width for center positioned headlines and content text.
$page-content-position-center-max-width: $page-content-max-width !default;

/// Min width the header title is supposed to have in a split layout
/// (i.e. when the page has two columns and some kind of embed is
/// displayed on the right) with text positioned on the left.
$page-header-title-min-width-for-split-layout: 525px !default;

/// Relative width of tagline, subtitle and content text
$page-content-width: 60% !default;

.page {
  &_header-subtitle,
  &_header-tagline,
  &_sub_header,
  .paragraph {
    max-width: $page-content-max-width;
    width: $page-content-width;

    @include mobile {
      width: 100%;
    }
  }

  &_header-title {
    max-width: $page-header-title-max-width;
    width: 100%;
  }

  $page-padding-left: $page-scroller-padding-left;
  $page-padding-right: $page-scroller-padding-right;
  $page-content-wrapper-width: 100% - $page-padding-left - $page-padding-right;

  // On pages that support split layout (i.e. some kind of
  // embed can be displayed on the right), we have to shorten the page
  // content so that it is contained inside the left column.
  //
  // Embeds use up to 55% of the page width. So we want to ensure that
  // the sum of the content's width and left margin stays below 45% of
  // the page width:
  //
  //   $page-content-width-relative-to-page + $page-padding-left = 45%
  //   $page-content-width-relative-to-wrapper * $page-content-wrapper-width
  //     + $page-padding-left = 45%
  //
  // Subtract 1% to keep a bit of space between text and embed.
  $page-content-split-layout-width: floor((44% - $page-padding-left)
                                          / ($page-content-wrapper-width / 100%));

  // When the pixel width of the title is given by
  //
  //   $title-width-in-px = $page-width-in-px
  //                          * ($page-content-wrapper-width / 100%)
  //                          * ($page-content-split-layout-width / 100%),
  //
  // the title has at least the given min width if the page has width:
  $page-min-width-for-split-layout: $page-header-title-min-width-for-split-layout
                                      / ($page-content-split-layout-width / 100%)
                                      / ($page-content-wrapper-width / 100%);

  @media screen and (min-width: $page-min-width-for-split-layout) {
    &-with_split_layout {
      .page_header-subtitle,
      .page_header-title,
      .page_header-tagline,
      .page_sub_header,
      .paragraph {
        width: $page-content-split-layout-width;
      }
    }
  }

  // Not all page types support text position "center" so far. Make
  // sure styles only apply to those that explicitly opt in by setting
  // a class on their wrapper element.

  &.text_position_right,
  &.text_position_center .supports_text_position_center {
    .page_header-subtitle,
    .page_header-title,
    .page_header-tagline,
    .page_sub_header,
    .paragraph {
      @include margin-start(auto);
      max-width: $page-content-position-right-max-width;
      width: 60%;

      @include mobile {
        width: 100%;
      }
    }

    .page_header {
      margin-left: auto;
      width: 100%;

      @include mobile {
        width: 100%;
      }
    }
  }

  &.text_position_center .supports_text_position_center {
    .page_header-subtitle,
    .page_header-title,
    .page_header-tagline,
    .paragraph {
      @include margin-end(auto);
      max-width: $page-content-position-center-max-width;
    }
  }
}
