html[theme="g90"] .code-override {
  border: 1px solid var(--cds-ui-03);
}

.code-override .bx--snippet {
  /** Docs code snippet is always dark mode */
  color-scheme: dark;
  max-width: none;
}

.code-override .bx--copy-btn,
.code-override .bx--snippet,
.code-override button.bx--btn.bx--snippet-btn--expand {
  background-color: #262626;
  color: #f4f4f4;
}

.code-override .bx--copy-btn:hover,
.code-override button.bx--btn.bx--snippet-btn--expand:hover {
  background-color: #393939;
}

.code-override .bx--snippet__icon {
  fill: #f4f4f4;
}

.code-override .bx--snippet-container pre {
  font-size: var(--cds-code-02-font-size);
  line-height: var(--cds-code-02-line-height);
  letter-spacing: var(--cds-code-02-letter-spacing);
  cursor: text;
}

.code-override .bx--snippet--multi .bx--snippet-container pre {
  overflow-x: auto;
}

/* Addig this to the layout grid fixes overstretching. */
.fix-overflow {
  min-width: 0;
}

.token.tag,
.token.operator {
  color: #6ea6ff;
}

.token.builtin,
.token.attr-name {
  color: #3ddbd9; /* teal 30 */
}

.token.function {
  color: #9ef0f0;
}

.token.token.language-javascript,
.token.attr-value {
  color: #d4bbff; /* purple 30 */
}

.token.keyword {
  color: #bb8eff;
}

.token.punctuation {
  color: #a8a8a8; /* gray 40 */
}

.token.script .token.language-javascript {
  color: #3ddbd9; /* teal 30 */
}

.token.string {
  color: #fa75a6;
}

.token.boolean {
  color: #bb8eff;
}

.token.number {
  color: #a7f0ba;
}

.token.comment {
  color: #bebebe;
}

.override-tabs a.bx--tabs__nav-link,
.override-tabs a.bx--tabs__nav-link:focus,
.override-tabs a.bx--tabs__nav-link:active {
  width: auto !important;
}

#select-theme {
  width: auto;
}

/*
 * Main content needs to supersede z-index of SideNav but not that of the Header.
 * UI Shell Header shares the same z-index.
 */
[aria-label="Navigation"] {
  z-index: calc(8000 + 2);
}

[aria-label="Navigation"] ~ [data-components] {
  z-index: calc(8000 + 1);
}

@media (max-width: 65.98rem) {
  [aria-label="Navigation"] ~ [data-components] {
    z-index: 1;
  }
}

.prose > p > .bx--link {
  font-size: inherit;
  text-decoration: underline;
}

.prose .toc {
  margin-bottom: var(--cds-layout-01);
}

.table {
  position: sticky;
  max-height: calc(100vh - 3rem);
  top: 3rem;
  margin-top: -3rem;
  padding-top: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-05);
  padding-left: var(--cds-spacing-08);
  overflow-y: auto;
}

[data-components] {
  position: relative;
  display: flex;
}

[data-components] .bx--grid {
  width: 100%;
}

@media (max-width: 1056px) {
  .table {
    display: none;
  }
}

.preview-viewer > .bx--aspect-ratio,
.preview-viewer [data-outline] {
  outline: 1px solid var(--cds-interactive-04);
}

[data-outline] {
  position: relative;
}

[data-outline] ~ [data-outline] {
  margin-top: var(--cds-spacing-08);
}

#select-theme {
  width: auto;
}

.prose > p > .bx--link {
  font-size: inherit;
}

.prose .toc {
  margin-bottom: var(--cds-layout-01);
}

.code-01 {
  font-size: var(--cds-code-01-font-size);
  font-weight: var(--cds-code-01-font-weight);
  letter-spacing: var(--cds-code-01-letter-spacing);
  line-height: var(--cds-code-01-line-height);
}

.body-short-01 {
  font-size: var(--cds-body-short-01-font-size);
  font-weight: var(--cds-body-short-01-font-weight);
  letter-spacing: var(--cds-body-short-01-letter-spacing);
  line-height: var(--cds-body-short-01-line-height);
}

.bx--col > h1 {
  font-size: var(--cds-expressive-heading-05-font-size);
  font-weight: var(--cds-expressive-heading-05-font-weight);
  letter-spacing: var(--cds-expressive-heading-05-letter-spacing);
  line-height: var(--cds-expressive-heading-05-line-height);
  margin-bottom: var(--cds-layout-01);
}

.big-paragraph {
  font-size: var(--cds-expressive-heading-03-font-size);
  font-weight: var(--cds-expressive-heading-03-font-weight);
  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
  line-height: var(--cds-expressive-heading-03-line-height);
  margin-top: var(--cds-layout-03);
  margin-bottom: var(--cds-layout-06);
}

.big-link,
.bx--col > .big-paragraph > code {
  font-size: var(--cds-expressive-heading-03-font-size);
  font-weight: var(--cds-expressive-heading-03-font-weight);
  letter-spacing: var(--cds-expressive-heading-03-letter-spacing);
  line-height: var(--cds-expressive-heading-03-line-height);
}

.bx--col > p {
  max-width: 44rem;
}

.bx--col > p > code {
  font-size: var(--cds-code-02-font-size);
  font-weight: var(--cds-code-02-font-weight);
  line-height: var(--cds-code-02-line-height);
  letter-spacing: var(--cds-code-02-letter-spacing);
  background-color: var(--cds-ui-03);
  border-radius: 0.25rem;
  padding: 0 var(--cds-spacing-02);
}

[class*="bx--col"] > h2,
.bx--tab-content > h2 {
  font-size: var(--cds-expressive-heading-04-font-size);
  font-weight: var(--cds-expressive-heading-04-font-weight);
  letter-spacing: var(--cds-expressive-heading-04-letter-spacing);
  line-height: var(--cds-expressive-heading-04-line-height);
  padding-top: var(--cds-layout-03);
  margin-bottom: var(--cds-layout-01);
}

.bx--col > h4 {
  font-size: var(--cds-expressive-heading-02-font-size);
  font-weight: var(--cds-expressive-heading-02-font-weight);
  letter-spacing: var(--cds-expressive-heading-02-letter-spacing);
  line-height: var(--cds-expressive-heading-02-line-height);
  padding-top: var(--cds-layout-04);
  margin-bottom: var(--cds-layout-01);
}

.bx--col > h2,
.bx--tab-content > h2,
.bx--col > h3,
.bx--col > h4 {
  scroll-margin-top: 3rem;
}

.bx--col > p {
  margin-bottom: var(--cds-layout-02);
}