@media screen and (width <= 1024px) {
  aside.toc.sidebar {
    display: none;
  }
}

@media screen and (width >= 1025px) {
  main {
    flex: auto;
    /* min-width: 0 required for flexbox to constrain overflowing elements */
    min-width: 0;
  }

  main > .content {
    display: flex;
  }

  aside.toc.embedded {
    display: none;
  }

  aside.toc.sidebar {
    flex: 0 0 var(--toc-width);
    min-width: 15rem;
  }

  .toc.sidebar .toc-menu ul {
    scrollbar-width: thin; /* Firefox */
  }

  .toc.sidebar .toc-menu ul::-webkit-scrollbar {
    width: var(--scrollbar-thickness); /* Chrome/Safari/Webkit */
  }

  .toc.sidebar .toc-menu ul::-webkit-scrollbar-track {
    background: var(--scrollbar-track-color);
    border-radius: var(--scrollbar-radius);
  }

  .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb-color);
    border-radius: var(--scrollbar-radius);
  }

  .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:hover,
  .toc.sidebar .toc-menu ul::-webkit-scrollbar-thumb:active {
    background: var(--scrollbar-thumb-active-color);
  }
}

@media screen and (width >= 1216px) {
  aside.toc.sidebar {
    flex-basis: var(--toc-width--widescreen);
  }
}
