/**
 * Main content area
 */
.bd-main {
  flex-grow: 1;
  flex-direction: column;
  display: flex;
  min-width: 0;

  .bd-content {
    display: flex;
    justify-content: center;
    height: 100%;

    .bd-article-container {
      justify-content: start;
      display: flex;
      flex-direction: column;

      // Max-width is slightly more than the W3 since our docs often have images.
      // We shoot for about 100 characters per line instead of 80.
      // ref: https://www.w3.org/WAI/tutorials/page-structure/styling/#line-length
      width: 100%;
      max-width: 60em;
      overflow-x: auto; // Prevent wide content from pushing off the secondary sidebar
      padding: 1rem;

      .bd-article {
        // Give a bit more verticle spacing on wide screens
        @include media-breakpoint-up($breakpoint-sidebar-secondary) {
          padding-top: 1.5rem;
          padding-left: 2rem;
        }

        // If the user clicks a TOC link or opens a URL that goes directly to a
        // section of the article, then highlight the heading for that section.
        // The rule is written this way because Sphinx puts ids on sections
        // rather than headings.
        :target > :is(h1, h2, h3, h4, h5, h5) {
          background-color: var(--pst-color-target);
        }

        // If an inline element has padding, then it can take up more height
        // than its parent. This becomes really apparent when highlighting the
        // parent element, i.e., setting its background color to
        // `var(--pst-color-target)`. In that case, the inline element extends
        // outside the highlighted area and it looks bad.
        :is(h1, h2, h3, h4, h5, h6) > code {
          display: inline-block;
        }
      }
    }
  }
}
