@stainless-api/docs-ui 0.1.0-beta.85 → 0.1.0-beta.87

package/dist/styles/main.css

@@ -1,6 +1,5 @@
-/* Overview page content */
 .stldocs-root .stldocs-overview {
-  .stldocs-overview-header {
+  & .stldocs-overview-header {
     padding: var(--stldocs-title-padding-y) 0;
 
     & > * {
@@ -8,46 +7,46 @@
       margin: auto 0;
     }
 
-    .stldocs-overview-header-info {
-      margin-top: 16px;
+    & .stldocs-overview-header-info {
+      align-items: center;
       height: 40px;
+      margin-top: 16px;
       display: flex;
-      align-items: center;
 
-      .stldocs-overview-header-info-timestamp {
+      & .stldocs-overview-header-info-timestamp {
         font-size: var(--stl-typography-scale-xs);
         color: var(--stl-color-foreground);
-        opacity: 50%;
+        opacity: .5;
       }
     }
   }
 
-  .stldocs-resource {
+  & .stldocs-resource {
     padding: 2rem 0;
 
-    &:not([data-stl-resource-language='terraform']) .stldocs-resource-content {
+    &:not([data-stl-resource-language="terraform"]) .stldocs-resource-content {
       max-width: var(--stldocs-content-width);
       margin: auto 0;
     }
 
-    .stldocs-resource-header {
-      display: flex;
+    & .stldocs-resource-header {
+      opacity: .85;
       flex-direction: column;
       gap: 16px;
-      opacity: 85%;
+      display: flex;
 
-      .stldocs-resource-title {
-        .stldocs-icon {
-          margin-left: 8px;
+      & .stldocs-resource-title {
+        & .stldocs-icon {
           color: var(--stl-color-foreground-muted);
           vertical-align: middle;
-          display: inline;
           height: 1rem;
+          margin-left: 8px;
+          display: inline;
         }
 
-        .stldocs-resource-title-segment {
-          margin-right: 8px;
+        & .stldocs-resource-title-segment {
           color: var(--stl-color-foreground);
+          margin-right: 8px;
 
           &:not(:last-child) {
             color: var(--stl-color-foreground-reduced);
@@ -56,263 +55,255 @@
         }
       }
 
-      .stldocs-resource-name {
+      & .stldocs-resource-name {
         font-family: var(--stl-typography-font-mono);
         color: var(--stl-color-foreground);
       }
 
-      .stldocs-resource-description {
+      & .stldocs-resource-description {
         font-size: var(--stl-typography-scale-base);
         color: var(--stl-color-foreground-reduced);
         line-height: 150%;
       }
     }
 
-    .stldocs-resource-content {
-      .stldocs-resource-content-group {
-        display: flex;
+    & .stldocs-resource-content {
+      & .stldocs-resource-content-group {
         flex-direction: column;
+        display: flex;
 
-        .stldocs-resource-content-group-model-title {
+        & .stldocs-resource-content-group-model-title {
           padding-top: var(--stldocs-content-padding-block);
           color: var(--stl-color-foreground-muted);
-          font-weight: normal;
+          padding-bottom: .5rem;
           font-size: 1rem;
-          padding-bottom: 0.5rem;
+          font-weight: normal;
           display: flex;
         }
 
-        .stldocs-resource-content-group-name {
+        & .stldocs-resource-content-group-name {
           color: var(--stl-color-foreground-muted);
         }
 
-        .stldocs-resource-content-properties {
+        & .stldocs-resource-content-properties {
           margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
         }
       }
     }
   }
 
-  > .stldocs-resource:nth-child(2) {
+  & > .stldocs-resource:nth-child(2) {
     padding-top: 0;
   }
 }
 
-/* Overview page method summary */
-.stldocs-root .stldocs-overview .stldocs-method-summary,
-.stldocs-root .stldocs-overview .stldocs-method {
+.stldocs-root .stldocs-overview .stldocs-method-summary, .stldocs-root .stldocs-overview .stldocs-method {
   padding: var(--stldocs-content-padding-block) 0;
 
-  .stldocs-method-header {
-    display: flex;
+  & .stldocs-method-header {
     flex-direction: column;
     gap: 4px;
+    display: flex;
 
-    .stldocs-method-title {
+    & .stldocs-method-title {
       margin-bottom: 2px;
 
-      a:hover {
+      & a:hover {
         text-decoration: underline;
       }
     }
 
-    .stldocs-method-route {
+    & .stldocs-method-route {
       padding-top: 4px;
     }
   }
 
-  .stldocs-method-signature {
+  & .stldocs-method-signature {
     max-width: var(--stldocs-content-width);
-    overflow: hidden;
     text-overflow: ellipsis;
+    overflow: hidden;
   }
 
-  .stldocs-method-description {
+  & .stldocs-method-description {
     color: var(--stl-color-foreground-muted);
     height: 1.7rem;
-    overflow-y: hidden;
-    line-height: 1.7rem;
     padding-bottom: var(--stldocs-content-padding-block);
+    line-height: 1.7rem;
+    overflow-y: hidden;
 
-    .stldocs-content > * {
+    & .stldocs-content > * {
       white-space: nowrap;
-      overflow-x: hidden;
       text-overflow: ellipsis;
+      overflow-x: hidden;
     }
   }
 }
 
-/* Method route rendering is shared between method previews and pages */
 .stldocs-root .stldocs-method-header .stldocs-method-route {
-  display: flex;
   gap: 4px;
   padding: 0;
+  display: flex;
 
-  .stldocs-method-route-endpoint {
+  & .stldocs-method-route-endpoint {
     font-family: var(--stl-typography-font-mono);
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
+    text-overflow: ellipsis;
+    white-space: nowrap;
     align-content: center;
     line-height: 120%;
     overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 }
 
-/* Models and properties */
-.stldocs-root .stldocs-property,
-.stldocs-root .stldocs-model {
-  display: flex;
-  flex-direction: column;
-  gap: 0.8rem;
-  padding: 0.5rem 0;
+.stldocs-root .stldocs-property, .stldocs-root .stldocs-model {
   font-size: var(--stl-typography-scale-sm);
+  flex-direction: column;
+  gap: .8rem;
+  padding: .5rem 0;
+  display: flex;
 
-  &:has(.stldocs-expander-summary-content .stldocs-property-description)
-    .stldocs-expander-content
-    > .stldocs-property-description {
-    padding-top: 0.75rem;
+  &:has(.stldocs-expander-summary-content .stldocs-property-description) .stldocs-expander-content > .stldocs-property-description {
+    padding-top: .75rem;
   }
 
-  .stldocs-expander-summary-content {
+  & .stldocs-expander-summary-content {
     max-width: 100%;
   }
 
-  .stldocs-property-header {
-    align-items: first baseline;
-    display: flex;
-    gap: 0.5rem;
+  & .stldocs-property-header {
     flex-wrap: wrap;
+    align-items: baseline;
+    gap: .5rem;
+    display: flex;
   }
 
-  .stldocs-property-info {
-    display: flex;
+  & .stldocs-property-info {
     flex-direction: column;
+    display: flex;
 
     & > .stldocs-property-type > .stldocs-text-identifier {
       color: var(--stl-color-foreground);
     }
   }
 
-  .stldocs-property-type {
+  & .stldocs-property-type {
     font-family: var(--stl-typography-font-mono);
     color: var(--stl-color-foreground-muted);
   }
 
-  .stldocs-property-type,
-  .stldocs-property-declaration {
-    .stldocs-type-preview[data-stldocs-type-preview='union']
-      .stldocs-type-preview[data-stldocs-type-preview='properties'] {
+  & .stldocs-property-type, & .stldocs-property-declaration {
+    & .stldocs-type-preview[data-stldocs-type-preview="union"] .stldocs-type-preview[data-stldocs-type-preview="properties"] {
       display: none;
     }
   }
 
-  .stldocs-property-deprecated {
+  & .stldocs-property-deprecated {
     font-family: var(--stl-typography-font);
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
     font-weight: 600;
   }
 
-  .stldocs-property-deprecated-message {
+  & .stldocs-property-deprecated-message {
     color: var(--stl-color-red-foreground);
     font-size: var(--stl-typography-scale-sm);
   }
-  .stldocs-property-declaration {
+
+  & .stldocs-property-declaration {
     white-space: nowrap;
-    overflow: hidden;
     text-overflow: ellipsis;
+    border-radius: var(--stl-ui-layout-border-radius-xs);
     min-width: 0;
     max-width: max-content;
-    border-radius: var(--stl-ui-layout-border-radius-xs);
     padding-inline: var(--stl-ui-layout-border-radius-xs);
     margin-left: calc(-1 * var(--stl-ui-layout-border-radius-xs));
-    background-color: transparent;
-    transition: 0.1s background-color ease;
+    background-color: #0000;
+    transition: background-color .1s;
+    overflow: hidden;
 
-    .stldocs-property-deprecated {
-      margin-right: 0.44rem;
+    & .stldocs-property-deprecated {
+      margin-right: .44rem;
     }
   }
-  .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
+
+  & .stldocs-property-info:is(:target, .stldocs-property-highlighted) .stldocs-property-declaration {
     background-color: var(--stl-color-accent-muted-background);
-    transition: 0.1s background-color ease;
+    transition: background-color .1s;
   }
 
-  .stldocs-property-description,
-  .stldocs-property-title {
+  & .stldocs-property-description, & .stldocs-property-title {
     font-size: var(--stl-typography-scale-sm);
     color: var(--stl-color-foreground-reduced);
 
-    .stldocs-content {
+    & .stldocs-content {
       color: inherit;
       font-size: inherit;
     }
   }
 
-  .stldocs-property-name {
+  & .stldocs-property-name {
     font-family: var(--stl-typography-font-mono);
     color: var(--stl-color-foreground);
     font-weight: 700;
   }
 
-  .stldocs-property-annotation {
+  & .stldocs-property-annotation {
     color: var(--stl-color-foreground-reduced);
   }
 
-  .stldocs-property-typename {
+  & .stldocs-property-typename {
     font-size: var(--stl-typography-scale-xs);
     color: var(--stl-color-foreground-muted);
     line-height: 175%;
 
-    .stldocs-type-reference {
-      font-size: 0.8rem;
+    & .stldocs-type-reference {
       color: var(--stldocs-syntax-color-blue);
+      font-size: .8rem;
       font-weight: 600;
     }
   }
 
-  .stldocs-property-type {
-    .stldocs-truncation {
-      margin-right: 0.2rem;
+  & .stldocs-property-type {
+    & .stldocs-truncation {
       white-space: nowrap;
+      margin-right: .2rem;
     }
   }
 
-  .stldocs-property-badges {
-    display: flex;
-    font-size: 0.85rem;
-    gap: 0.5rem;
+  & .stldocs-property-badges {
     text-transform: lowercase;
+    gap: .5rem;
+    font-size: .85rem;
     line-height: 1.5rem;
+    display: flex;
   }
 
-  .stldocs-property-constraints {
+  & .stldocs-property-constraints {
     display: flex;
   }
 
-  .stldocs-property-constraint {
+  & .stldocs-property-constraint {
     color: var(--stl-color-foreground-reduced);
 
     &:not(:last-child) {
-      &::after {
-        content: ', ';
-        margin-right: 0.4rem;
+      &:after {
+        content: ", ";
         color: var(--stl-color-foreground-reduced);
+        margin-right: .4rem;
       }
     }
 
-    .stldocs-property-constraint-name {
+    & .stldocs-property-constraint-name {
       color: var(--stl-color-foreground-reduced);
 
-      &::after {
-        content: ':';
-        margin-right: 0.4rem;
+      &:after {
+        content: ":";
+        margin-right: .4rem;
       }
     }
 
-    .stldocs-property-constraint-value {
+    & .stldocs-property-constraint-value {
       background-color: var(--stldocs-color-bg-inline-code);
       color: var(--stl-color-foreground-reduced);
       font-family: var(--stl-typography-font-mono);
@@ -321,25 +312,21 @@
     }
   }
 
-  .stldocs-property-type:not(:first-child) {
-    font-size: 0.8rem;
-  }
-
-  .stldocs-property .stldocs-property-type {
-    font-size: 0.8rem;
+  & .stldocs-property-type:not(:first-child), & .stldocs-property .stldocs-property-type {
+    font-size: .8rem;
   }
 }
 
 .stldocs-root {
-  .stldocs-properties {
-    display: flex;
+  & .stldocs-properties {
     flex-direction: column;
     line-height: 150%;
+    display: flex;
   }
 }
 
 .stldocs-root .stldocs-property {
-  padding: 0.2rem 0;
+  padding: .2rem 0;
 }
 
 .stldocs-root .stldocs-property:not(.stldocs-property .stldocs-property) > .stldocs-property-info {
@@ -347,33 +334,31 @@
 }
 
 .stldocs-root .stldocs-tooltip-content .stldocs-property {
-  gap: 0.1rem;
-  padding: 0.1rem !important;
   border: 0;
+  gap: .1rem;
+  padding: .1rem !important;
 }
 
 .stldocs-root .stldocs-badge {
-  display: inline-block;
   background-color: var(--stl-color-muted-background);
-  padding: 0 0.5rem;
-  border-radius: 4px;
   font-size: var(--stl-typography-scale-xs);
+  border-radius: 4px;
+  padding: 0 .5rem;
   font-weight: 500;
+  display: inline-block;
 
-  &[data-badge-id='deprecated'] {
+  &[data-badge-id="deprecated"] {
     background-color: var(--stl-color-red-muted-background);
     color: var(--stl-color-red-foreground);
     text-transform: capitalize;
   }
 
-  &[data-badge-id='optional'] {
+  &[data-badge-id="optional"] {
     background-color: var(--stl-color-muted-background);
     text-transform: capitalize;
   }
 }
 
-/* Method Pages */
-
 .stldocs-root .stldocs-method-signature {
   font-family: var(--stl-typography-font-mono);
   font-size: var(--stl-typography-scale-sm);
@@ -383,455 +368,449 @@
   font-weight: 400;
   line-height: 1.5rem;
 
-  .stldocs-signature-qualified {
+  & .stldocs-signature-qualified {
     color: var(--stl-color-foreground-reduced);
     font-weight: 400;
   }
 
-  .stldocs-signature-name {
+  & .stldocs-signature-name {
     color: var(--stl-color-foreground);
     font-weight: 600;
   }
 
-  .stldoc-signature-params {
-    .stldocs-text-identifier {
+  & .stldoc-signature-params {
+    & .stldocs-text-identifier {
       color: var(--stl-color-foreground);
     }
   }
 
-  .stldocs-type {
+  & .stldocs-type {
     color: var(--stl-color-foreground);
   }
 
-  .stldocs-type-preview[data-stldocs-type-preview='properties'] {
+  & .stldocs-type-preview[data-stldocs-type-preview="properties"] {
     display: none;
   }
 
-  .stldocs-method-badges {
+  & .stldocs-method-badges {
     margin-top: 1rem;
   }
 }
 
 .stldocs-root .stldocs-method {
-  .stldocs-method-content-column {
-    display: contents;
-  }
-
-  .stldocs-method-header {
+  & .stldocs-method-header {
     padding: var(--stldocs-title-padding-y) var(--stldocs-content-padding-inline)
       var(--stldocs-content-padding-block);
 
-    .stldocs-method-title {
+    & .stldocs-method-title {
       font-size: var(--stl-typography-text-h1);
-      letter-spacing: -0.03em;
+      letter-spacing: -.03em;
     }
 
-    .stldocs-method-signature {
-      margin-top: 0.75rem;
+    & .stldocs-method-signature {
+      margin-top: .75rem;
     }
 
-    .stldocs-method-route {
+    & .stldocs-method-route {
       padding-top: 12px;
     }
   }
 
-  .stldocs-method-description {
-    grid-area: 1 / 1 / 2 / 2;
+  & .stldocs-method-description {
     padding-bottom: var(--stldocs-content-padding-block);
+    grid-area: 1 / 1 / 2 / 2;
 
-    code {
+    & code {
+      font-size: .93rem;
       line-height: 150%;
-      font-size: 0.93rem;
     }
   }
 
-  .stldocs-method-example {
-    margin-top: 1rem;
+  & .stldocs-method-example {
     grid-area: 2 / 1 / 3 / 2;
+    margin-top: 1rem;
 
-    .stldocs-snippet-multi-response {
+    & .stldocs-snippet-multi-response {
       display: none;
     }
   }
 
-  .stldocs-snippet-multi-response {
+  & .stldocs-snippet-multi-response {
     border: 1px solid var(--stl-color-border);
     border-radius: 12px;
 
-    .stldocs-snippet {
-      background-color: transparent;
+    &:is(.stldocs-method-response-column .stldocs-snippet-multi-response) {
+      overflow: clip;
+
+      & .stldocs-snippet {
+        padding: 0;
+      }
+    }
+
+    & .stldocs-snippet {
+      background-color: #0000;
+      border: none;
+      border-radius: 0;
     }
 
-    .stldocs-snippet-code .shiki {
-      padding: 0.5rem;
+    & .stldocs-snippet-code .shiki {
+      padding: .5rem;
     }
   }
 
-  .stldocs-method-info {
+  & .stldocs-method-info {
     padding: var(--stldocs-content-padding-block) 0;
+    font-size: var(--stl-typography-scale-sm);
+    flex-direction: column;
     grid-area: 3 / 1 / 4 / 2;
-    display: flex;
     gap: 2rem;
-    flex-direction: column;
     margin-top: 2.5rem;
-    font-size: var(--stl-typography-scale-sm);
+    display: flex;
 
-    h5 {
+    & h5 {
       display: flex;
     }
   }
 
-  /* TODO(soon): we shouldn't be copying these styles here. */
-  .stldocs-method-available-languages a {
+  & .stldocs-method-available-languages a {
     color: var(--stl-color-link-foreground);
     text-decoration-color: rgb(from currentColor r g b / calc(alpha * var(--stl-opacity-level-040)));
-    transition: text-decoration-color 0.1s ease-out;
+    transition: text-decoration-color .1s ease-out;
   }
 
-  .stldocs-method-info-section {
-    display: flex;
-    gap: 0.5rem;
+  & .stldocs-method-info-section {
     flex-direction: column;
+    gap: .5rem;
+    display: flex;
 
-    h5 .stl-ui-badge {
+    & h5 .stl-ui-badge {
       vertical-align: bottom;
-      margin-left: 0.5em;
       margin-top: -1px;
+      margin-left: .5em;
       transform: translateY(1px);
     }
   }
 
-  .stldocs-method-content-column {
+  & .stldocs-method-content-column {
     display: contents;
   }
 
-  .stldocs-method-body {
-    display: grid;
-    gap: 2rem;
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: repeat(4, auto);
+  & .stldocs-method-body {
     padding: var(--stldocs-content-padding-block) 0;
+    grid-template-rows: repeat(4, auto);
+    grid-template-columns: minmax(0, 1fr);
+    gap: 2rem;
+    display: grid;
 
-    .stldocs-method-description p {
+    & .stldocs-method-description p {
       color: var(--stl-color-foreground-reduced);
       line-height: 150%;
     }
 
-    h5 {
-      font-weight: 400;
+    & h5 {
       color: var(--stl-color-foreground-muted);
+      font-weight: 400;
       font-size: var(--stl-typography-scale-base);
     }
 
-    .stldocs-method-parameters,
-    .stldocs-method-parameters,
-    .stldocs-method-returns {
+    & .stldocs-method-parameters, & .stldocs-method-parameters, & .stldocs-method-returns {
       margin-left: calc(-1 * var(--stldocs-expander-margin-shift));
     }
 
-    .stldocs-method-parameters {
-      display: flex;
+    & .stldocs-method-parameters {
       flex-direction: column;
-      gap: 0.5rem;
+      gap: .5rem;
+      display: flex;
     }
 
-    .stldocs-method-parameters h5 {
+    & .stldocs-method-parameters h5 {
       margin-left: var(--stldocs-expander-margin-shift);
     }
 
-    .stldocs-terraform-resource-title {
+    & .stldocs-terraform-resource-title {
       font-family: var(--stl-typography-font-mono);
-      font-size: 1.1rem;
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
+      font-size: 1.1rem;
+      overflow: hidden;
     }
   }
 
-  .stldocs-snippet,
-  .stldocs-snippet-multi {
+  & .stldocs-snippet, & .stldocs-snippet-multi {
     top: calc(var(--sl-nav-height) + 1rem);
-    position: sticky;
     z-index: 5;
+    position: sticky;
   }
 
-  .stldocs-snippet {
+  & .stldocs-snippet {
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
-
-    padding: 0.25rem;
-    border-radius: calc(12px + 0.25rem);
-    display: flex;
-    flex-direction: column;
     background-color: var(--stl-color-faint-background);
     border: 1px solid var(--stl-color-border-faint);
+    border-radius: calc(12px + .25rem);
+    flex-direction: column;
+    padding: .25rem;
+    display: flex;
 
-    .stldocs-snippet-request {
+    & .stldocs-snippet-request {
       background-color: var(--stl-color-background);
       --shiki-background: var(--stl-color-background);
       border: 1px solid var(--stl-color-border);
       border-radius: 12px;
       position: relative;
 
-      .stldocs-snippet-code {
-        border-bottom-left-radius: 12px;
+      & .stldocs-snippet-code {
         border-bottom-right-radius: 12px;
+        border-bottom-left-radius: 12px;
       }
     }
 
-    .stldocs-snippet-request-title {
-      display: flex;
-      justify-content: space-between;
+    & .stldocs-snippet-request-title {
       background-color: var(--stl-color-background);
       color: var(--stl-color-foreground-reduced);
       border-bottom: 1px solid var(--stl-color-border);
-      border-top-right-radius: 12px;
-      border-top-left-radius: 12px;
-      padding: 0.5rem;
-      padding-left: 0.75rem;
-      gap: 0.5rem;
       font-family: var(--stl-typography-font);
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+      justify-content: space-between;
+      gap: .5rem;
+      padding: .5rem .5rem .5rem .75rem;
+      display: flex;
 
-      .stldocs-snippet-request-title-method {
+      & .stldocs-snippet-request-title-method {
         flex-grow: 1;
         min-width: 0;
       }
 
-      .stldocs-snippet-request-title-method,
-      .stldocs-snippet-request-title-content {
-        display: flex;
-        gap: 0.5rem;
+      & .stldocs-snippet-request-title-method, & .stldocs-snippet-request-title-content {
         align-items: center;
+        gap: .5rem;
+        display: flex;
       }
 
-      h3 {
-        font-weight: 500;
+      & h3 {
         font-style: normal;
+        font-weight: 500;
         line-height: 100%;
         font-size: inherit;
         font-family: var(--stl-typography-font);
         color: var(--stl-color-foreground);
-        margin: 0;
-
-        overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
+        margin: 0;
+        overflow: hidden;
       }
 
-      @media (min-width: 1280px) {
-        .stldocs-snippet-request-title-label {
+      @media (width >= 1280px) {
+        & .stldocs-snippet-request-title-label {
           display: none;
         }
       }
 
-      .stldocs-icon {
+      & .stldocs-icon {
         width: 16px;
       }
 
-      .stldocs-snippet-request-title-content {
+      & .stldocs-snippet-request-title-content {
         font-family: var(--stl-typography-font);
+        gap: .5rem;
         display: flex;
-        gap: 0.5rem;
 
-        .stldocs-snippet-request-title-language {
-          position: relative;
+        & .stldocs-snippet-request-title-language {
           color: var(--stl-color-foreground);
           cursor: pointer;
-          display: flex;
           align-items: center;
           gap: 4px;
+          display: flex;
+          position: relative;
 
-          select {
+          & select {
             z-index: 5;
+            align-items: center;
             padding-right: 25px;
             display: flex;
-            align-items: center;
           }
         }
       }
     }
 
-    .stldocs-snippet-response-pane {
-      padding: 0.5rem;
+    & .stldocs-snippet-response-pane {
+      --shiki-background: transparent;
+      padding: .5rem;
       display: none;
-      --shiki-background: var(--stl-color-faint-background);
 
       &.stldocs-snippet-response-pane-active {
         display: block;
       }
 
-      .stldocs-snippet-code {
+      & .stldocs-snippet-code {
         padding: 0;
       }
     }
 
-    .stldocs-snippet-response {
+    & .stldocs-snippet-response {
       margin-top: 1rem;
     }
   }
 
-  .stldocs-method-response-column {
-    display: flex;
+  & .stldocs-method-response-column {
     flex-direction: column;
     gap: 1rem;
     margin-top: 2.5rem;
+    display: flex;
   }
 
-  .stldocs-snippet-code {
+  & .stldocs-snippet-code {
     width: 0;
     min-width: 100%;
-    overflow: auto;
-    display: block;
     white-space: preserve nowrap;
-    padding: 1rem;
     max-height: 560px;
     font-size: var(--stl-typography-scale-sm);
-    line-height: 1.5;
-    transition: height 240ms ease;
     will-change: height;
     scrollbar-color: var(--stl-color-border) transparent;
+    padding: 1rem;
+    line-height: 1.5;
+    transition: height .24s;
+    display: block;
+    overflow: auto;
 
-    pre,
-    .shiki {
-      margin: 0;
-      padding: 0;
+    & pre, & .shiki {
       width: max-content;
       min-width: 100%;
+      margin: 0;
+      padding: 0;
     }
 
-    pre.shiki {
+    & pre.shiki {
       counter-reset: codeblock-line;
 
-      .line {
+      & .line {
         counter-increment: codeblock-line;
 
-        &::before {
+        &:before {
           content: counter(codeblock-line);
           color: var(--stl-color-foreground-muted);
+          opacity: .5;
+          text-align: right;
+          width: 1rem;
           margin-right: 1rem;
-          opacity: 0.5;
           display: inline-flex;
-          width: 1rem;
-          text-align: right;
         }
 
         &.ellipsis {
+          opacity: .5;
           color: var(--stl-color-foreground-muted) !important;
-          opacity: 0.5;
         }
       }
     }
   }
 
-  .stldocs-snippet-footer {
+  & .stldocs-snippet-footer {
     border-top: 1px solid var(--stl-color-border);
-    padding: 0.5rem;
+    padding: .5rem;
   }
 
-  .stldocs-snippet-response-tab {
+  & .stldocs-snippet-response-tab {
+    border-bottom: 1px solid var(--stl-color-border-faint);
+    gap: .5rem;
     display: flex;
-    gap: 0.5rem;
     overflow-x: auto;
-    border-bottom: 1px solid var(--stl-color-border-faint);
-    margin-inline: -0.5rem;
-    padding-inline: 0.5rem;
 
-    .stldocs-snippet-response-tab-item {
+    & .stldocs-snippet-response-tab-item {
+      border-bottom: 2px solid #0000;
       flex: 1;
-      border-bottom: 2px solid transparent;
       min-width: 160px;
       height: 40px;
 
-      button {
-        width: 100%;
+      & button {
         white-space: nowrap;
-        overflow: hidden;
         text-overflow: ellipsis;
         vertical-align: middle;
+        width: 100%;
         color: var(--stl-color-foreground-reduced);
+        overflow: hidden;
       }
 
-      button:hover {
+      & button:hover {
         background-color: var(--stl-color-background-hover);
       }
     }
 
-    .stldocs-snippet-response-tab-item-active {
+    & .stldocs-snippet-response-tab-item-active {
       border-color: var(--stl-color-accent-inverse-background);
 
-      button {
+      & button {
         color: var(--stl-color-foreground);
       }
     }
 
     &.stldocs-snippet-response-tab-single-return {
       background-color: var(--stl-color-faint-background);
-      border-top-left-radius: 12px;
-      border-top-right-radius: 12px;
 
-      .stldocs-snippet-response-tab-item {
-        border: none;
+      & .stldocs-snippet-response-tab-item {
         color: var(--stl-color-foreground-reduced);
+        border: none;
         font-weight: 400;
         display: flex;
 
-        button {
-          justify-content: flex-start;
+        & button {
           cursor: default;
+          justify-content: flex-start;
           height: auto;
 
           &:hover {
-            background-color: transparent;
+            background-color: #0000;
           }
         }
       }
     }
   }
 
-  .stldocs-markdown {
-    :first-child {
+  & .stldocs-markdown {
+    & :first-child {
       margin-top: 0;
     }
   }
 
-  .stldocs-snippet-multi {
-    .stldocs-snippet-multi-tabs {
+  & .stldocs-snippet-multi {
+    & .stldocs-snippet-multi-tabs {
       background: var(--stl-color-faint-background);
       border: 1px solid var(--stl-color-border-faint);
-      padding: 0.25rem;
-      border-radius: calc(var(--stl-ui-layout-border-radius) + 0.25rem);
-      display: flex;
-      flex-wrap: nowrap;
-      margin-bottom: 0.5rem;
-      overflow-x: scroll;
+      border-radius: calc(var(--stl-ui-layout-border-radius) + .25rem);
       scrollbar-color: var(--stl-color-border) transparent;
-
       font-size: var(--stl-typography-scale-sm);
-      line-height: 1;
-
+      flex-wrap: nowrap;
       max-width: max-content;
+      margin-bottom: .5rem;
+      padding: .25rem;
+      line-height: 1;
+      display: flex;
+      overflow-x: scroll;
 
-      .stldocs-snippet-multi-tab {
+      & .stldocs-snippet-multi-tab {
         border-radius: var(--stl-ui-layout-border-radius);
-        border: 1px solid transparent;
+        color: var(--stl-color-foreground-reduced);
+        border: 1px solid #0000;
+        flex: none;
         padding: 9px 14px;
         font-weight: 400;
-        color: var(--stl-color-foreground-reduced);
-        flex: 0 0 auto;
 
         & > input {
           display: none;
         }
-        &:has(> :checked) {
+
+        &:has( > :checked) {
           background-color: var(--stl-color-ui-background);
           border-color: var(--stl-color-border);
-          font-weight: 500;
           color: var(--stl-color-foreground);
+          font-weight: 500;
         }
       }
     }
-    .stldocs-snippet-multi-pane {
+
+    & .stldocs-snippet-multi-pane {
       display: none;
+
       &.stldocs-snippet-multi-pane-active {
         display: block;
       }
@@ -843,30 +822,30 @@
   background-color: var(--stl-color-background);
   border: 1px solid var(--stl-color-border);
   border-radius: 8px;
-  padding: 16px;
-  display: flex;
   flex-direction: column;
   gap: 8px;
+  padding: 16px;
+  display: flex;
 
-  .stldocs-language-block-content {
-    display: flex;
+  & .stldocs-language-block-content {
     gap: 12px;
+    display: flex;
 
-    .stldocs-language-block-content-icon {
-      display: inline-flex;
+    & .stldocs-language-block-content-icon {
       border: 1px solid var(--stl-color-border);
+      aspect-ratio: 1;
       border-radius: 4px;
       padding: 12px;
-      aspect-ratio: 1 / 1;
+      display: inline-flex;
     }
 
-    .stldocs-language-block-content-info {
-      .stldocs-language-block-content-info-language {
-        line-height: 120%;
+    & .stldocs-language-block-content-info {
+      & .stldocs-language-block-content-info-language {
         font-weight: 600;
+        line-height: 120%;
       }
 
-      .stldocs-language-block-content-info-version {
+      & .stldocs-language-block-content-info-version {
         font-family: var(--stl-typography-font-mono);
         font-size: var(--stl-typography-scale-sm);
         font-weight: 200;
@@ -874,8 +853,7 @@
     }
   }
 
-  .stldocs-language-block-install {
-    display: flex;
+  & .stldocs-language-block-install {
     font-family: var(--stl-typography-font-mono);
     font-size: var(--stl-typography-scale-sm);
     background-color: var(--stldocs-color-bg-inline-code);
@@ -883,25 +861,26 @@
     color: var(--stl-color-foreground-reduced);
     border-radius: 4px;
     padding: 4px 8px;
+    display: flex;
 
-    pre {
-      flex-grow: 1;
+    & pre {
       white-space: nowrap;
-      overflow-x: hidden;
       text-overflow: ellipsis;
-      display: flex;
+      flex-grow: 1;
       align-items: center;
+      display: flex;
+      overflow-x: hidden;
     }
 
-    svg {
+    & svg {
       vertical-align: middle;
       min-width: 16px;
     }
   }
 
-  .stldocs-language-block-links {
-    display: flex;
+  & .stldocs-language-block-links {
     gap: 8px;
+    display: flex;
 
     & > a:last-child {
       flex-grow: 1;
@@ -909,23 +888,22 @@
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .stldocs-root .stldocs-method.stldocs-method-double-pane {
-    .stldocs-method-example {
-      flex: 1 1 500px;
-      max-width: 100%;
+    & .stldocs-method-example {
+      flex: 500px;
       width: 100%;
+      max-width: 100%;
     }
 
-    .stldocs-method-body {
+    & .stldocs-method-body {
       flex-direction: row;
       gap: 2rem;
     }
   }
 }
 
-/* Don't put expanders in the margin on mobile */
-@media (max-width: 50rem) {
+@media (width <= 50rem) {
   .stldocs-root .stldocs-method-body {
     padding: 1rem var(--stldocs-content-padding-inline) !important;
   }
@@ -933,87 +911,92 @@
   .stldocs-root .stldocs-resource .stldocs-resource-content {
     padding: 0 var(--stldocs-content-padding-inline) !important;
 
-    .stldocs-resource-content-properties {
+    & .stldocs-resource-content-properties {
       margin-left: 0 !important;
     }
   }
 }
 
-@media (min-width: 50rem) {
+@media (width >= 50rem) {
   .stldocs-root .stldocs-method {
-    .stldocs-method-header {
+    & .stldocs-method-header {
       padding: var(--stldocs-title-padding-y) 0;
     }
   }
 }
 
-@media (min-width: 1280px) {
+@media (width >= 1280px) {
   .stldocs-root {
-    .stldocs-method.stldocs-method-double-pane .stldocs-method-content-column {
+    & .stldocs-method.stldocs-method-double-pane .stldocs-method-content-column {
       display: block;
     }
 
-    .stldocs-method.stldocs-method-double-pane .stldocs-method-body {
+    & .stldocs-method.stldocs-method-double-pane .stldocs-method-body {
       grid-template-columns: repeat(2, minmax(0, 1fr));
-      grid-template-areas: 'description example';
+      grid-template-areas: "description example";
       grid-template-rows: unset;
 
-      .stldocs-snippet {
-        .stldocs-snippet-response {
+      & .stldocs-snippet {
+        & .stldocs-snippet-response {
           display: block;
         }
 
-        .stldocs-snippet-response-pane {
-          position: relative;
-          padding: 0;
+        & .stldocs-snippet-response-pane {
           --shiki-background: transparent;
+          padding: 0;
+          position: relative;
         }
 
-        .stldocs-snippet-multi-response {
-          display: block;
+        & .stldocs-snippet-multi-response {
           padding: 0;
+          display: block;
+        }
+
+        & .stldocs-snippet-response-tab {
+          margin-inline: -.5rem;
+          padding-inline: .5rem;
         }
       }
 
-      .stldocs-method-response-column {
-        display: none;
+      & .stldocs-method-response-column {
         margin-top: 0;
+        display: none;
       }
 
-      .stldocs-method-content-column {
+      & .stldocs-method-content-column {
         grid-area: description;
       }
 
-      .stldocs-method-example {
-        margin-top: 0;
+      & .stldocs-method-example {
         grid-area: example;
+        margin-top: 0;
 
-        .stldocs-snippet-multi-response {
-          display: block;
+        & .stldocs-snippet-multi-response {
           border: none;
+          display: block;
 
-          .stldocs-snippet {
-            background-color: transparent;
+          & .stldocs-snippet {
+            background-color: #0000;
             border: none;
           }
         }
       }
 
-      .stldocs-method-info {
+      & .stldocs-method-info {
         grid-area: unset;
         margin-top: 0;
       }
 
-      .stldocs-snippet-response-tab {
-        margin-bottom: 0.5rem;
+      & .stldocs-snippet-response-tab {
+        margin-bottom: .5rem;
 
         &.stldocs-snippet-response-tab-single-return {
-          background-color: transparent;
+          background-color: #0000;
 
-          .stldocs-snippet-response-tab-item {
-            button {
+          & .stldocs-snippet-response-tab-item {
+            & button {
               &:hover {
-                background-color: transparent;
+                background-color: #0000;
               }
             }
           }
@@ -1022,4 +1005,3 @@
     }
   }
 }
-