+
+/* mobile */
+@media (max-width: 769px) {
+ .tsd-widget.options,
+ .tsd-widget.menu {
+ display: inline-block;
+ }
+
+ .container-main {
+ display: flex;
+ }
+ html .col-content {
+ float: none;
+ max-width: 100%;
+ width: 100%;
+ }
+ html .col-sidebar {
+ position: fixed !important;
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ z-index: 1024;
+ top: 0 !important;
+ bottom: 0 !important;
+ left: auto !important;
+ right: 0 !important;
+ padding: 1.5rem 1.5rem 0 0;
+ width: 75vw;
+ visibility: hidden;
+ background-color: var(--color-background);
+ transform: translate(100%, 0);
+ }
+ html .col-sidebar > *:last-child {
+ padding-bottom: 20px;
+ }
+ html .overlay {
+ content: "";
+ display: block;
+ position: fixed;
+ z-index: 1023;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: rgba(0, 0, 0, 0.75);
+ visibility: hidden;
+ }
+
+ .to-has-menu .overlay {
+ animation: fade-in 0.4s;
+ }
+
+ .to-has-menu .col-sidebar {
+ animation: pop-in-from-right 0.4s;
+ }
+
+ .from-has-menu .overlay {
+ animation: fade-out 0.4s;
+ }
+
+ .from-has-menu .col-sidebar {
+ animation: pop-out-to-right 0.4s;
+ }
+
+ .has-menu body {
+ overflow: hidden;
+ }
+ .has-menu .overlay {
+ visibility: visible;
+ }
+ .has-menu .col-sidebar {
+ visibility: visible;
+ transform: translate(0, 0);
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+ max-height: 100vh;
+ padding: 1rem 2rem;
+ }
+ .has-menu .tsd-navigation {
+ max-height: 100%;
+ }
+}
+
+/* one sidebar */
+@media (min-width: 770px) {
+ .container-main {
+ display: grid;
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
+ grid-template-areas: "sidebar content";
+ margin: 2rem auto;
+ }
+
+ .col-sidebar {
+ grid-area: sidebar;
+ }
+ .col-content {
+ grid-area: content;
+ padding: 0 1rem;
+ }
+}
+@media (min-width: 770px) and (max-width: 1399px) {
+ .col-sidebar {
+ max-height: calc(100vh - 2rem - 42px);
+ overflow: auto;
+ position: sticky;
+ top: 42px;
+ padding-top: 1rem;
+ }
+ .site-menu {
+ margin-top: 1rem;
+ }
+}
+
+/* two sidebars */
+@media (min-width: 1200px) {
+ .container-main {
+ grid-template-columns: minmax(0, 1fr) minmax(0, 2.5fr) minmax(0, 20rem);
+ grid-template-areas: "sidebar content toc";
+ }
+
+ .col-sidebar {
+ display: contents;
+ }
+
+ .page-menu {
+ grid-area: toc;
+ padding-left: 1rem;
+ }
+ .site-menu {
+ grid-area: sidebar;
+ }
+
+ .site-menu {
+ margin-top: 1rem 0;
+ }
+
+ .page-menu,
+ .site-menu {
+ max-height: calc(100vh - 2rem - 42px);
+ overflow: auto;
+ position: sticky;
+ top: 42px;
+ }
+}