// Styles for docs-like pages without left sidebar

.td-no-left-sidebar .td-main {
  // Hide left sidebar
  .td-sidebar {
    display: none !important;
  }

  // Adjust ToC sidebar, e.g., to fill Bootstrap columns that the left sidebar
  // would have taken was using.
  .td-sidebar-toc {
    @include media-breakpoint-up(md) {
      display: block !important;
    }

    // Always 2 col wide (unless hidden)
    @extend .col-md-2;

    // Don't scroll with the page (otherwise, for short pages, the ToC hides
    // behind the top navbar).
    position: fixed;
    right: 0;

    // Ensure ToC doesn't overlap with the footer
    z-index: -1;
  }

  // The <main> element sibling of the ToC sidebar
  > div > main {
    // Always 10 col wide (unless the ToC sidebar is hidden)
    @extend .col-md-10;
    @extend .col-xl-10;

    @include media-breakpoint-up(md) {
      padding-right: 3rem;
    }

    @include media-breakpoint-up(lg) {
      // Center content on larger screens

      .td-content {
        max-width: 80%;
        margin-left: auto;
        margin-right: auto;

        // Cancel .td-max-width-on-larger-screens
        > * {
          max-width: 100%;
        }
      }
    }
  }
}
