@scalar/api-reference 0.1.27 → 0.1.29

package/dist/style.css

@@ -1,4 +1,4 @@
-.cm-scroller,
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap');@import url('https://fonts.googleapis.com/css?family=JetBrains%20Mono');@import 'node_modules/modern-normalize/modern-normalize.css';@import 'node_modules/modern-normalize/modern-normalize.css';.cm-scroller,
 .custom-scroll {
   overflow-y: scroll;
   scrollbar-color: transparent transparent;
@@ -66,7 +66,7 @@
   }
 }
 
-.sidebar-search[data-v-5005eb5e] {
+.sidebar-search[data-v-62a174a2] {
   display: flex;
   align-items: center;
   position: relative;
@@ -76,7 +76,7 @@
   margin: 12px var(--margin-x) 6px var(--margin-x);
   padding: 0 12px;
 
-  color: var(--theme-color-3);
+  color: var(--sidebar-color-2, var(--theme-color-2));
   outline: none;
   border-radius: var(--theme-radius-lg);
   border: 1px solid var(--theme-border-color);
@@ -85,7 +85,7 @@
   cursor: pointer;
   appearance: none;
 }
-.sidebar-search-input[data-v-5005eb5e] {
+.sidebar-search-input[data-v-62a174a2] {
   font-size: var(--theme-small);
   font-weight: var(--theme-semibold);
   line-height: 31px;
@@ -95,7 +95,7 @@
   position: relative;
   display: block;
 }
-.search-icon[data-v-5005eb5e] {
+.search-icon[data-v-62a174a2] {
   padding: 0;
   margin-right: 9px;
   width: 12px;
@@ -844,13 +844,13 @@ to {
   flex-direction: column;
 }
 
-.client-libraries-content[data-v-c88c87e1] {
+.client-libraries-content[data-v-474a477f] {
   display: flex;
   justify-content: center;
   gap: 6px;
   padding: 0 12px;
 }
-.code-languages[data-v-c88c87e1] {
+.code-languages[data-v-474a477f] {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -864,98 +864,113 @@ to {
 }
 /* remove php and c on mobile */
 @media screen and (max-width: 450px) {
-.code-languages[data-v-c88c87e1]:nth-of-type(4),
-  .code-languages[data-v-c88c87e1]:nth-of-type(6) {
+.code-languages[data-v-474a477f]:nth-of-type(4),
+  .code-languages[data-v-474a477f]:nth-of-type(6) {
     display: none;
 }
 }
-.code-languages-icon[data-v-c88c87e1] {
+.code-languages-icon[data-v-474a477f] {
   max-width: 48px;
   width: 100%;
   max-height: 48px;
   aspect-ratio: 1;
-  border-radius: 12px;
   padding: 7px;
   display: flex;
   align-items: center;
-  color: #fff;
   justify-content: center;
+  position: relative;
+  color: var(--theme-code-language-color-supersede, #fff);
+}
+.code-languages-background[data-v-474a477f] {
+  border-radius: 12px;
+  position: relative;
+  overflow: hidden;
+  box-shadow: 0 0 0 1px var(--theme-code-languages-border-color);
+}
+.code-languages-background[data-v-474a477f]:before {
+  content: '';
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  pointer-events: none;
+  background: var(--theme-code-languages-background-supersede);
 }
-.code-languages-icon__shell[data-v-c88c87e1] {
+.code-languages-icon__shell[data-v-474a477f] {
   background: #000;
-  box-shadow: 0 0 0 1px var(--theme-border-color);
 }
-.code-languages-icon__ruby[data-v-c88c87e1] {
+.code-languages-icon__ruby[data-v-474a477f] {
   background: #d91404;
 }
-.code-languages-icon__php[data-v-c88c87e1] {
+.code-languages-icon__php[data-v-474a477f] {
   background: #6181b6;
 }
-.code-languages-icon__python[data-v-c88c87e1] {
+.code-languages-icon__python[data-v-474a477f] {
   background: #306998;
 }
-.code-languages-icon__more[data-v-c88c87e1] {
+.code-languages-icon__more[data-v-474a477f] {
   background: var(--theme-background-3);
 }
-.code-languages-icon__node[data-v-c88c87e1] {
+.code-languages-icon__node[data-v-474a477f] {
   background: #83cd29;
 }
-.code-languages-icon__c[data-v-c88c87e1] {
+.code-languages-icon__c[data-v-474a477f] {
   background: #03599c;
 }
-.code-languages-icon__csharp[data-v-c88c87e1] {
+.code-languages-icon__csharp[data-v-474a477f] {
   background: #68217a;
 }
-.code-languages-icon__cplusplus[data-v-c88c87e1] {
+.code-languages-icon__cplusplus[data-v-474a477f] {
   background: #9c033a;
 }
-.code-languages-icon__clojure[data-v-c88c87e1] {
+.code-languages-icon__clojure[data-v-474a477f] {
   background: #5881d8;
 }
-.code-languages-icon__go[data-v-c88c87e1] {
+.code-languages-icon__go[data-v-474a477f] {
   background: #00acd7;
 }
-.code-languages-icon__http[data-v-c88c87e1] {
+.code-languages-icon__http[data-v-474a477f] {
   background: #005b9b;
 }
-.code-languages-icon__java[data-v-c88c87e1] {
+.code-languages-icon__java[data-v-474a477f] {
   background: #ea2d2e;
 }
-.code-languages-icon__javascript[data-v-c88c87e1] {
+.code-languages-icon__javascript[data-v-474a477f] {
   background: #f0db4f;
 }
-.code-languages-icon__kotlin[data-v-c88c87e1] {
+.code-languages-icon__kotlin[data-v-474a477f] {
   background: #7f6cb1;
 }
-.code-languages-icon__objc[data-v-c88c87e1] {
+.code-languages-icon__objc[data-v-474a477f] {
   background: #0b5a9d;
 }
-.code-languages-icon__ocaml[data-v-c88c87e1] {
+.code-languages-icon__ocaml[data-v-474a477f] {
   background: #f29100;
 }
-.code-languages-icon__powershell[data-v-c88c87e1] {
+.code-languages-icon__powershell[data-v-474a477f] {
   background: #2671be;
 }
-.code-languages-icon__r[data-v-c88c87e1] {
+.code-languages-icon__r[data-v-474a477f] {
   background: #cbced0;
 }
-.code-languages-icon__swift[data-v-c88c87e1] {
+.code-languages-icon__swift[data-v-474a477f] {
   background: #f05138;
 }
-.code-languages__loading .code-languages-icon[data-v-c88c87e1]:before {
+.code-languages__loading .code-languages-icon[data-v-474a477f]:before {
   border: 1px solid rgba(255, 255, 255, 0.44);
   border-top: 1px solid white;
-  animation: codeloader-c88c87e1 0.45s linear infinite;
+  animation: codeloader-474a477f 0.45s linear infinite;
   background: transparent;
   width: 18px;
   height: 18px;
   content: '';
   border-radius: 50%;
 }
-.code-languages__loading .code-languages-icon svg[data-v-c88c87e1] {
+.code-languages__loading .code-languages-icon svg[data-v-474a477f] {
   display: none;
 }
-.code-languages__active[data-v-c88c87e1]:after {
+.code-languages__active[data-v-474a477f]:after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -963,7 +978,7 @@ to {
   width: 100%;
   background: var(--theme-color-1);
 }
-@keyframes codeloader-c88c87e1 {
+@keyframes codeloader-474a477f {
 0% {
     transform: rotate(0deg);
 }
@@ -971,15 +986,15 @@ to {
     transform: rotate(1turn);
 }
 }
-.code-languages span[data-v-c88c87e1] {
+.code-languages span[data-v-474a477f] {
   margin-top: 3px;
   color: var(--theme-color-2);
   font-size: var(--theme-micro);
 }
-.code-languages__active span[data-v-c88c87e1] {
+.code-languages__active span[data-v-474a477f] {
   color: var(--theme-color-1);
 }
-.code-languages__select select[data-v-c88c87e1] {
+.code-languages__select select[data-v-474a477f] {
   opacity: 0;
   width: 100%;
   height: 100%;
@@ -987,13 +1002,14 @@ to {
   top: 0;
   left: 0;
   cursor: pointer;
+  z-index: 1;
 }
-.code-languages__select span[data-v-c88c87e1] {
+.code-languages__select span[data-v-474a477f] {
   position: relative;
   display: flex;
   align-items: center;
 }
-.code-languages__select span[data-v-c88c87e1]:after {
+.code-languages__select span[data-v-474a477f]:after {
   content: '';
   width: 8px;
   height: 8px;
@@ -1384,6 +1400,161 @@ to {
     margin-bottom: 24px;
 }
 }
+
+.modal-layout[data-v-3f4ab567] {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  z-index: 1001;
+  background: rgba(0, 0, 0, 0.44);
+  padding: 20px;
+  opacity: 0;
+  animation: modal-fade-3f4ab567 0.2s forwards;
+}
+.modal-body[data-v-3f4ab567] {
+  padding: 24px 12px 18px 24px;
+  max-height: calc(100vh - 240px);
+  background: var(--theme-background-1);
+  border-radius: var(--theme-radius-lg);
+  font-family: var(--theme-font);
+}
+.modal[data-v-3f4ab567] {
+  margin: 80px auto 0;
+  position: relative;
+  background: var(--theme-background-2);
+  border-radius: var(--theme-radius-lg);
+  color: var(--theme-color-1);
+  width: 100%;
+  text-align: left;
+  line-height: 1.4;
+  opacity: 0;
+  transform: scale(0.98);
+  animation: modal-pop-3f4ab567 0.15s 0.15s forwards;
+  display: flex;
+  flex-direction: column;
+}
+.modal-content-large[data-v-3f4ab567] {
+  max-width: 800px;
+}
+.modal-content-normal[data-v-3f4ab567] {
+  max-width: 640px;
+}
+.modal-content-small[data-v-3f4ab567] {
+  max-width: 480px;
+}
+@keyframes modal-fade-3f4ab567 {
+from {
+    opacity: 0;
+}
+to {
+    opacity: 1;
+}
+}
+@keyframes modal-pop-3f4ab567 {
+0% {
+    opacity: 0;
+}
+100% {
+    opacity: 1;
+    transform: scale(1);
+}
+}
+.modal-header[data-v-3f4ab567] {
+  padding: 12px 24px;
+  color: var(--theme-color-1);
+  font-size: var(--theme-font-size-4);
+  text-align: left;
+  font-weight: 600;
+  border-radius: var(--theme-radius-lg) var(--theme-radius-lg) 0 0;
+}
+
+.post[data-v-6fd55f49] {
+  color: var(--theme-post-color);
+}
+.patch[data-v-6fd55f49] {
+  color: var(--theme-patch-color);
+}
+.get[data-v-6fd55f49] {
+  color: var(--theme-get-color);
+}
+.delete[data-v-6fd55f49] {
+  color: var(--theme-delete-color);
+}
+.put[data-v-6fd55f49] {
+  color: var(--theme-put-color);
+}
+.ref-search-input[data-v-6fd55f49] {
+  width: 100%;
+  background: transparent;
+  padding: 12px;
+  font-size: 13px;
+  outline: none;
+  border: 1px solid var(--theme-border-color);
+  border-radius: var(--theme-radius);
+  color: var(--theme-color-1);
+  font-weight: var(--theme-semibold);
+  font-size: var(--theme-font-size-3);
+  appearance: none;
+  margin-bottom: 12px;
+}
+.ref-search-input[data-v-6fd55f49]::-webkit-input-placeholder,
+.ref-search-input[data-v-6fd55f49]::placeholder {
+  color: var(--theme-color-3);
+  font-family: var(--theme-font);
+  font-weight: var(--theme-regular);
+}
+.item-entry[data-v-6fd55f49] {
+  appearance: none;
+  background: transparent;
+  border: none;
+  outline: none;
+  padding: 6px 0;
+  width: 100%;
+  font-size: var(--theme-font-size-3);
+  text-align: left;
+  border-bottom: 1px solid var(--theme-border-color);
+}
+.item-entry[data-v-6fd55f49]:hover {
+  background: var(--theme-background-2);
+  border-radius: var(--theme-radius);
+  border-bottom-color: transparent;
+  box-shadow: 0 0 0 1px var(--theme-background-2);
+  width: calc(100% + 12px);
+  padding: 6px;
+  position: relative;
+  left: -6px;
+  z-index: 10;
+}
+.item-entry[data-v-6fd55f49]:has(+ .item-entry:hover) {
+  border-bottom-color: transparent;
+}
+.item-entry em[data-v-6fd55f49] {
+  display: none;
+  font-size: var(--theme-font-size-4);
+  color: var(--theme-color-3);
+}
+.item-entry:hover em[data-v-6fd55f49] {
+  display: block;
+}
+.item-entry-verb[data-v-6fd55f49] {
+  font-family: var(--theme-font-code);
+  min-width: 100px;
+  display: inline-block;
+  text-align: right;
+}
+.item-entry-heading[data-v-6fd55f49] {
+  display: flex;
+  justify-content: space-between;
+}
+
+
+* {
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
 /* fonts */
 :root {
   --app-header-height: 50px;
@@ -1552,6 +1723,17 @@ to {
   --scalar-brand: #8b7256;
 }
 
+/** CSS Normalize */
+.scalar-api-reference {
+
+}
+.scalar-api-reference ul,
+  .scalar-api-reference ol {
+    padding: 0;
+}
+.scalar-api-reference p {
+    margin: 0;
+}
 /** Utilities, how do we deal with them? */
 .flex {
   display: flex;
@@ -1574,7 +1756,6 @@ to {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
-
 /** TODO: Move to components */
 .codemenu-topbar {
   background: var(--theme-background-2);
@@ -1716,7 +1897,6 @@ to {
 .endpoint-response__headers + .endpoint-response {
   border-top: none;
 }
-
 /* ----------------------------------------------------- */
 .reference {
   position: relative;
@@ -1756,7 +1936,6 @@ to {
   color: var(--theme-color-1);
   text-decoration: underline;
 }
-
 /* ----------------------------------------------------- */
 /* Responsive styles for narrow reference container (900px) */
 .references-narrow .reference {
@@ -1782,7 +1961,6 @@ to {
   color: var(--theme-color-1);
   line-height: 1.45;
 }
-
 /** Layout */
 /* ----------------------------------------------------- */
 /* Document Layouts */
@@ -1853,7 +2031,6 @@ to {
   background: var(--theme-background-1);
   display: flex;
 }
-
 /* Measures the visible viewport of the editor */
 .layout-content-viewport {
   position: fixed;
@@ -1887,7 +2064,6 @@ to {
 .layout-footer {
   grid-area: footer;
 }
-
 /* ----------------------------------------------------- */
 /* Document layout modified for references */
 .document.layout-swagger-editor {
@@ -1951,7 +2127,468 @@ to {
   --col-width-2: 50%;
   --col-width-3: 50%;
 }
+/* ----------------------------------------------------- */
+/* Responsive styles */
+@media (max-width: 1150px) {
+.document.layout-swagger-editor {
+    --col-width-3: 0;
+    --col-width-2: auto;
+}
+}
+@media (max-width: 1000px) {
+.document,
+  .document.layout-swagger-editor {
+    /** Content area heights are restricted using just the template row defs */
+    grid-template-rows:
+      var(--scalar-api-reference-theme-header-height)
+      auto
+      auto
+      auto;
+
+    grid-template-columns: 100%;
+
+    grid-template-areas:
+      'sidebar'
+      'content'
+      'aside'
+      'footer';
+}
+.layout-aside-left,
+  .layout-aside-right,
+  .layout-aside-content {
+    position: static;
+    max-height: unset;
+}
+.layout-aside-left {
+    position: sticky;
+    top: 0;
+    height: var(--scalar-api-reference-theme-header-height);
+    border-bottom: 1px solid var(--theme-border-color);
+
+    width: 100%;
+    z-index: 10;
+    border-right: none;
+}
+.layout-aside-left .layout-aside-content {
+    position: absolute;
+
+    /* Offset by 1px to avoid gap */
+    top: calc(100% - 1px);
+    left: 0;
+    width: 100%;
+
+    /* Offset by 2px to fill screen and compensate for gap */
+    height: calc(var(--scalar-api-reference-document-height) + 2px);
+
+    border-top: 1px solid var(--theme-border-color);
+    display: flex;
+    flex-direction: column;
+}
+}
 
+/** CSS Normalize */
+.scalar-api-reference {
+
+}
+.scalar-api-reference ul,
+  .scalar-api-reference ol {
+    padding: 0;
+}
+.scalar-api-reference p {
+    margin: 0;
+}
+/** Utilities, how do we deal with them? */
+.flex {
+  display: flex;
+}
+.flex-col {
+  display: flex;
+  min-height: 0;
+  flex-direction: column;
+}
+.gap-1 {
+  gap: 12px;
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+/** TODO: Move to components */
+.codemenu-topbar {
+  background: var(--theme-background-2);
+  border-bottom: 1px solid var(--theme-border-color);
+  padding: 0 7px 0 12px;
+  border-radius: var(--theme-radius) var(--theme-radius) 0 0;
+}
+.codemenu {
+  display: flex;
+  position: relative;
+  justify-content: space-between;
+  align-items: center;
+  min-height: 35px;
+}
+.codemenu-tabs {
+  display: flex;
+  position: relative;
+  column-gap: 6px;
+}
+.codemenu-item {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.codemenu-item-key {
+  font-size: var(--theme-micro);
+  color: var(--theme-color-3);
+  padding: 6px 4px;
+  cursor: pointer;
+  user-select: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: var(--theme-semibold);
+  position: relative;
+  margin-left: -4px;
+  margin-right: -4px;
+  border-radius: var(--theme-radius-lg);
+  text-transform: uppercase;
+}
+.codemenu-item-key:hover {
+  background: var(--scalar-api-reference-theme-background-3);
+}
+.codemenu-item:first-of-type:last-of-type .codemenu-item-key,
+.codemenu-item__active .codemenu-item-key {
+  color: var(--theme-color-1);
+}
+.codemenu-item:first-of-type:last-of-type:after,
+.codemenu-item__active:after {
+  content: '';
+  width: 100%;
+  height: 1px;
+  position: absolute;
+  bottom: -4px;
+  background: var(--theme-color-1);
+}
+.codemenu-item__disabled {
+  pointer-events: none;
+}
+.endpoint {
+  display: flex;
+  white-space: nowrap;
+  cursor: pointer;
+}
+.endpoint span:first-of-type {
+  text-transform: uppercase;
+}
+.codemenu .endpoint {
+  overflow: hidden;
+}
+.endpoint .post {
+  color: var(--theme-post-color);
+}
+.endpoint .patch {
+  color: var(--theme-patch-color);
+}
+.endpoint .get {
+  color: var(--theme-get-color);
+}
+.endpoint .delete {
+  color: var(--theme-delete-color);
+}
+.endpoint .put {
+  color: var(--theme-put-color);
+}
+.endpoint .post,
+.endpoint .get,
+.endpoint .delete,
+.endpoint .put {
+  white-space: nowrap;
+}
+.endpoint span {
+  color: var(--theme-color-2);
+  min-width: 62px;
+  display: inline-block;
+  text-align: right;
+  line-height: 1.55;
+  font-family: var(--theme-font-code);
+  font-size: var(--theme-mini);
+  cursor: pointer;
+}
+.languages .example-item-endpoints {
+  background: var(--theme-background-2);
+  width: 100%;
+  border-top: 1px solid var(--theme-border-color);
+}
+.endpoint-response p {
+  margin-top: 6px;
+  font-size: var(--theme-small);
+  min-height: auto;
+  line-height: 17px;
+}
+.codemenu .endpoint span {
+  text-align: left;
+  min-width: auto;
+}
+.endpoint-response {
+  border-top: 1px solid var(--theme-border-color);
+  padding: 12px 0;
+  font-size: var(--theme-small);
+}
+.tag-description {
+  margin-top: 12px;
+}
+.reference .endpoint-title {
+  display: flex;
+  margin-bottom: 12px;
+  margin-top: 24px;
+}
+.copy .title {
+  font-size: var(--theme-heading-4);
+  font-weight: var(--theme-semibold);
+  color: var(--theme-color-1);
+  line-height: 1.45;
+}
+.endpoint-response__headers {
+  padding-bottom: 0;
+}
+.endpoint-response__headers + .endpoint-response {
+  border-top: none;
+}
+/* ----------------------------------------------------- */
+.reference {
+  position: relative;
+  padding: 0 60px;
+  width: 100%;
+}
+.reference:not(:last-of-type) {
+  border-bottom: 1px solid var(--theme-border-color);
+}
+.reference .reference-container {
+  position: relative;
+  display: flex;
+  gap: 48px;
+
+  max-width: 1120px;
+  margin: auto;
+  padding: 90px 0;
+}
+.reference-container + .reference-container {
+  border-top: 1px solid var(--theme-border-color);
+}
+.reference-container .copy,
+.reference-container .example {
+  flex: 1;
+  min-width: 0;
+}
+.response .cm-editor {
+  max-height: calc(50vh - 90px);
+}
+.example {
+  padding-top: 48px;
+  top: 12px;
+  height: fit-content;
+  position: sticky;
+}
+.copy .tag-description a {
+  color: var(--theme-color-1);
+  text-decoration: underline;
+}
+/* ----------------------------------------------------- */
+/* Responsive styles for narrow reference container (900px) */
+.references-narrow .reference {
+  padding: 0 30px;
+}
+@media screen and (max-width: 1000px) {
+.references-narrow .reference {
+    padding: 0 24px;
+}
+}
+.references-narrow .reference-container {
+  flex-direction: column;
+  gap: 24px;
+  padding: 48px 0;
+}
+.references-narrow .example {
+  padding-top: 0;
+}
+.editor-heading h1 {
+  font-size: var(--font-size, var(--theme-heading-2));
+  font-weight: var(--font-weight, var(--theme-bold));
+  /* prettier-ignore */
+  color: var(--theme-color-1);
+  line-height: 1.45;
+}
+/** Layout */
+/* ----------------------------------------------------- */
+/* Document Layouts */
+.document {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* Fallback to 100vh if the element height is not specified */
+  --full-height: var(--scalar-api-reference-full-height, 100vh);
+  /* --theme-header-height: 50px; */
+  /* --scalar-api-reference-theme-sidebar-width: 200px; */
+  /* --theme-toc-width: 200px; */
+
+  --document-height: calc(
+    var(--scalar-api-reference-full-height) -
+      var(--scalar-api-reference-theme-header-height)
+  );
+
+  --col-width-1: var(--scalar-api-reference-theme-sidebar-width);
+  --col-width-2: auto;
+  --col-width-3: var(--scalar-api-reference-theme-toc-width);
+
+  display: grid;
+
+  grid-template-rows:
+    var(--scalar-api-reference-theme-header-height)
+    auto
+    auto;
+
+  grid-template-columns:
+    var(--col-width-1)
+    var(--col-width-2)
+    var(--col-width-3);
+
+  grid-template-areas:
+    'header header header'
+    'sidebar content aside'
+    'sidebar footer footer';
+}
+.document.hide-aside-left {
+  --col-width-1: 0;
+}
+.document.hide-aside-right {
+  --col-width-3: 0;
+}
+.document.hide-aside-left .layout-aside-left .layout-aside-content,
+.document.hide-aside-right .layout-aside-right .layout-aside-content {
+  border-right-color: transparent;
+  border-left-color: transparent;
+  display: none;
+}
+.document.footer-below-sidebar {
+  grid-template-areas:
+    'header header header'
+    'sidebar content aside'
+    'footer footer footer';
+}
+.layout-header {
+  grid-area: header;
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+.layout-content {
+  grid-area: content;
+  min-width: 0;
+  background: var(--theme-background-1);
+}
+/* Measures the visible viewport of the editor */
+.layout-content-viewport {
+  position: fixed;
+  left: var(--scalar-api-reference-theme-sidebar-width);
+  right: var(--scalar-api-reference-theme-toc-width);
+  top: calc(
+    var(--scalar-api-reference-app-header-height) +
+      var(--scalar-api-reference-theme-header-height)
+  );
+  bottom: 0;
+  pointer-events: none;
+}
+.layout-aside-left {
+  position: relative;
+  grid-area: sidebar;
+  border-right: 1px solid var(--theme-border-color);
+}
+.layout-aside-right {
+  position: relative;
+  grid-area: aside;
+  background: var(--theme-background-1);
+}
+.layout-aside-content {
+  position: sticky;
+  top: var(--scalar-api-reference-theme-header-height);
+  height: var(--scalar-api-reference-document-height);
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+.layout-footer {
+  grid-area: footer;
+}
+/* ----------------------------------------------------- */
+/* Document layout modified for references */
+.document.layout-swagger-editor {
+  /* Fallback to 100vh if the element height is not specified */
+  --full-height: var(--scalar-api-reference-full-height, 100vh);
+  /* --theme-header-height: 50px; */
+  /* --scalar-api-reference-theme-sidebar-width: 200px; */
+  /* --theme-toc-width: 200px; */
+
+  --document-height: calc(
+    var(--scalar-api-reference-full-height) -
+      var(--scalar-api-reference-theme-header-height)
+  );
+
+  --col-width-1: var(--scalar-api-reference-theme-sidebar-width);
+  --col-width-2: calc(
+    50% - (var(--scalar-api-reference-theme-sidebar-width) / 2)
+  );
+  --col-width-3: calc(
+    50% - (var(--scalar-api-reference-theme-sidebar-width) / 2)
+  );
+
+  display: grid;
+
+  grid-template-rows:
+    var(--scalar-api-reference-theme-header-height)
+    auto;
+
+  grid-template-columns:
+    var(--col-width-1)
+    var(--col-width-2)
+    var(--col-width-3);
+
+  grid-template-areas:
+    'header header header'
+    'sidebar content aside'
+    'sidebar content footer';
+}
+.document.layout-swagger-editor .layout-content {
+  position: sticky;
+  top: var(--scalar-api-reference-theme-header-height);
+  height: var(--scalar-api-reference-document-height);
+}
+.document.preview {
+  --col-width-2: calc(100% - (var(--scalar-api-reference-theme-sidebar-width)));
+  --col-width-3: calc(100% - (var(--scalar-api-reference-theme-sidebar-width)));
+  max-height: 100vh;
+  grid-template-areas:
+    'header header'
+    'sidebar aside'
+    'sidebar footer';
+}
+.document.layout-swagger-editor.footer-below-sidebar.preview {
+  grid-template-areas:
+    'header header'
+    'sidebar aside'
+    'footer footer';
+}
+.document.layout-swagger-editor.hide-aside-left {
+  --col-width-1: 0;
+  --col-width-2: 50%;
+  --col-width-3: 50%;
+}
 /* ----------------------------------------------------- */
 /* Responsive styles */
 @media (max-width: 1150px) {