html.light pre code {
  color: var(--code-block-controls-text-color) !important;
}

ul.nav.navbar-nav {
  align-items: center;
  width: 100%;
}

.top-nav .topnav-search {
  flex-grow: 1;
}

.clio-only-notice {
	background-color: var(--admonition-info-bg-color);
	margin-left: var(--spacing-sm);
	padding: var(--spacing-xs);
	border-radius: var(--border-radius);
}

#content .heading-anchor h1,
#content .heading-anchor h2,
#content .heading-anchor h3,
#content .heading-anchor h4,
#content .heading-anchor h5,
#content .heading-anchor h6 {
  /* Fix left-alignment of headers in md content */
  gap: 0;
}

:root, :root.dark {
  --navbar-height: 80px;

  /* XRPL color palette; match to styles/_colors.scss
    Some colors don't have a 10 equivalent so 9 is repeated.
    
    These are in reverse order of the ones in styles/_colors.scss
    so that they correspond to the same-named variables provided by
    styled-components as part of Redocly.
  */

  /* Redocly doesn't have vars for grays by default  */
  --color-gray-1: #111112;
  --color-gray-2: #232325;
  --color-gray-3: #343437;
  --color-gray-4: #454549;
  --color-gray-5: #838386;
  --color-gray-6: #A2A2A4;
  --color-gray-7: #C1C1C2;
  --color-gray-8: #E0E0E1;
  --color-gray-9: #F5F5F7;
  --color-gray-10: var(--color-gray-9);

  /* color-red = XRPL $magenta */
  --color-red-1: #4C0026;
  --color-red-2: #4C0026;
  --color-red-3: #80003F;
  --color-red-4: #B20058;
  --color-red-5: #E50071;
  --color-red-6: #FF198B;
  --color-red-7: #FF4BA4;
  --color-red-8: #FF80BF;
  --color-red-9: #FFB2D8;
  --color-red-10: #FFE5F2;

  /* color-green = XRPL $green */
  --color-green-1: #0A2E1B;
  --color-green-2: #145C35;
  --color-green-3: #1E8A50;
  --color-green-4: #28B86A;
  --color-green-5: #2DCF78;
  --color-green-6: #32E685;
  --color-green-7: #5BEB9D;
  --color-green-8: #84F0B6;
  --color-green-9: #ADF5CE;
  --color-green-10: #D6FAE7;

  /* color-gold = XRPL $yellow */
  --color-gold-1: #4B4C00;
  --color-gold-2: #4B4C00;
  --color-gold-3: #7D8000;
  --color-gold-4: #AEB200;
  --color-gold-5: #E0E500;
  --color-gold-6: #FAFF19;
  --color-gold-7: #FBFF4C;
  --color-gold-8: #FCFF80;
  --color-gold-9: #FDFFB2;
  --color-gold-10: #FEFFE5;

  /* color-blue = XRPL $blue */
  --color-blue-1: #001133;
  --color-blue-2: #002E4C;
  --color-blue-3: #004D80;
  --color-blue-4: #006BB2;
  --color-blue-5: #008AE5;
  --color-blue-6: #19A3FF;
  --color-blue-7: #4BB7FF;
  --color-blue-8: #80CCFF;
  --color-blue-9: #B2E0FF;
  --color-blue-10: #E5F5FF;

  /* color purple = XRPL $blue-purple */
  --color-purple-1: #20004C;
  --color-purple-2: #20004C;
  --color-purple-3: #350080;
  --color-purple-4: #4A00B2;
  --color-purple-5: #5F00E5;
  --color-purple-6: #7919FF;
  --color-purple-7: #9A52FF;
  --color-purple-8: #B480FF;
  --color-purple-9: #D2B2FF;
  --color-purple-10: #F0E5FF;

  /* color-magenta = XRPL $red-purple */
  --color-magenta-1: #40004C;
  --color-magenta-2: #40004C;
  --color-magenta-3: #6B0080;
  --color-magenta-4: #9500B2;
  --color-magenta-5: #C000E5;
  --color-magenta-6: #D919FF;
  --color-magenta-7: #E24CFF;
  --color-magenta-8: #EA80FF;
  --color-magenta-9: #F2B2FF;
  --color-magenta-10: #FBE5FF;

  /* XRPL doesn't have a color-cyan equivalent*
  --color-cyan-1: #002329;*
  --color-cyan-2: #00474f;*
  --color-cyan-3: #006d75;*
  --color-cyan-4: #08979c;*
  --color-cyan-5: #13c2c2;*
  --color-cyan-6: #36cfc9;*
  --color-cyan-7: #5cdbd3;*
  --color-cyan-8: #87e8de;*
  --color-cyan-9: #b5f5ec;*
  --color-cyan-10: #e6fffb; */

  /* color-yellow = XRPL $yellow */
  --color-yellow-1: #4B4C00;
  --color-yellow-2: #4B4C00;
  --color-yellow-3: #7D8000;
  --color-yellow-4: #AEB200;
  --color-yellow-5: #E0E500;
  --color-yellow-6: #FAFF19;
  --color-yellow-7: #FBFF4C;
  --color-yellow-8: #FCFF80;
  --color-yellow-9: #FDFFB2;
  --color-yellow-10: #FEFFE5;

  /* XRPL doesn't have a color-lime equivalent*
  --color-lime-1: #254000;*
  --color-lime-2: #3f6600;*
  --color-lime-3: #5b8c00;*
  --color-lime-4: #7cb305;*
  --color-lime-5: #a0d911;*
  --color-lime-6: #bae637;*
  --color-lime-7: #d3f261;*
  --color-lime-8: #eaff8f;*
  --color-lime-9: #f4ffb8;*
  --color-lime-10: #fcffe6; */

  /* XRPL doesn't have a color-geekblue equivalent*
  --color-geekblue-1: #030852;*
  --color-geekblue-2: #061178;*
  --color-geekblue-3: #10239e;*
  --color-geekblue-4: #1d39c4;*
  --color-geekblue-5: #2f54eb;*
  --color-geekblue-6: #597ef7;*
  --color-geekblue-7: #85a5ff;*
  --color-geekblue-8: #adc6ff;*
  --color-geekblue-9: #d6e4ff;*
  --color-geekblue-10: #f0f5ff; */

  /* Dark mode colors by default */
  --color-primary-bg: var(--color-gray-10);
/*  --color-primary-bg-hover: #d6dfff;
  --color-primary-border: #adbcff;
  --color-primary-border-hover: #8a99ff;
  --color-primary-hover: #6678ff;
  --color-primary-base: #434dfa;
  --color-primary-active: #2f31d4;
  --color-primary-text-hover: #201dad;
  --color-primary-text: #161087;
  --color-primary-text-active: #0d086e;*/

  --link-color-primary: white;
  --link-decoration: underline;
  --link-font-weight: var(--font-weight-regular);

  /* See :root.dark below for the contrast rationale. */
  --link-color-primary-hover: var(--color-purple-8);
  --link-decoration-hover: underline;

  --link-color-visited: white;
  --link-visited-decoration: underline;

  --bg-color: var(--color-gray-1);  /* was --color-gray-10 */
  --bg-color-raised: var(--color-gray-2);
  --background-color: var(--bg-color);
 

  --font-family-base: 'Work Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --heading-font-family: var(--font-family-base);

  --inline-code-font-family: "Space Mono", monospace;
  --inline-code-text-color: var(--color-green-7);
  --inline-code-bg-color: var(--color-green-1);
  --inline-code-border-radius: 0;

  --heading-anchor-color: var(--color-purple-7);
  --h1-font-size: 3rem;
  --h2-font-size: 2.5rem;
  --h3-font-size: 2.125rem;
  --h3-font-weight: 600;
  --h4-font-size: 1.75rem;
  --h4-line-height: 2rem;
  --h5-font-size: 1.25rem;
  --h5-line-height: 1.5rem;

  --menu-container-padding-top: 0;
  --md-content-padding: 4px 0;
  --toc-offset-top: 2px;

  --sidebar-border-color: transparent;
  --sidebar-bg-color: transparent;
  --sidebar-margin-horizontal: 32px;

  --border-radius-md: 4px;

  --code-block-bg-color: var(--color-gray-2);
  --code-block-controls-bg-color: var(--color-gray-2);
  --code-block-controls-border: none;
  --code-block-padding: 0 2rem 1.5rem 2rem;

  --breadcrumbs-margin-bottom: 0.5rem;
  --breadcrumbs-text-color: var(--color-gray-4);
  --breadcrumbs-gap: 0 8px;
  --breadcrumbs-font-size: 0.833em;

  --footer-bg-color: transparent;
  --footer-column-divider-color: transparent;
  --footer-border-color: transparent;
  --footer-title-font-weight: 600;
  --footer-title-font-size: 1rem;
  --footer-title-text-color: var(--color-gray-6);

  --menu-item-padding-horizontal: 0px;
  --menu-item-bg-color-active: var(--color-gray-2);
  --menu-item-bg-color-active-hover: var(--color-gray-3);

  --md-list-left-padding: 40px;
  --md-list-margin: 0 0 20px 0;
  --md-table-header-bg-color: var(--color-gray-3);
  --md-table-border-color: var(--color-gray-3);

  --md-tabs-content-padding: 0;
  --md-tabs-tab-wrapper-padding: 0;

  --text-color-helper: var(--color-gray-6);
  --color-text-primary: white;
  --button-color-hover: white;

  --text-color-secondary: var(--color-gray-9); /* inherited for adominition text color */
  --admonition-success-bg-color: var(--color-green-2);
  --admonition-info-bg-color: var(--color-blue-4);
  /* none of the yellow shades in the XRPL palette work well with "warning"
     admonitions, so leave it the default */
  --admonition-danger-bg-color: var(--color-red-3);
}

:root.light {
  /* #141414 == Sass $black / $gray-900 (styles/_colors.scss). Hardcoded
     because this is plain CSS and can't reference Sass vars; defining it on
     the SCSS side instead gets stripped by PurgeCSS (its var() consumer, the
     generated link rule, lives in this theme layer, not the SCSS bundle). */
  --link-color-primary: black;
  --link-color-primary-hover: var(--color-purple-4);
  --link-color-visited: black;
  --text-color-secondary: black;
  --code-block-bg-color: var(--color-gray-9);
  --code-block-controls-bg-color: var(--color-gray-8);
  --code-block-controls-border: none;

  --md-tabs-active-tab-bg-color: var(--color-gray-7);
  --md-tabs-hover-tab-bg-color: var(--color-gray-8);

  --inline-code-bg-color: var(--color-gray-8);

  --search-trigger-bg-color: var(--color-gray-8);
  --search-trigger-color: var(--color-gray-5);
  --modal-bg-color: var(--color-gray-9);

  --language-picker-border-color: var(--color-gray-7);
  --language-picker-background-color: var(--color-gray-8);
  --select-list-bg-color: var(--color-gray-8);

  --button-bg-color-secondary: var(--color-gray-8);

  --footer-title-text-color: black;
  --bg-color: var(--color-gray-9);
  --bg-color-raised: var(--color-gray-8);
  --button-content-color-link: black;

  --menu-item-bg-color-active: var(--color-gray-8);
  --menu-item-bg-color-active-hover: var(--color-gray-7);

  --md-table-header-bg-color: var(--color-gray-8);
  --md-table-border-color: var(--color-gray-8);

  --bg-color: var(--color-gray-8);
  --code-panel-bg-color: var(--color-blue-4);
  --layer-color-hover: var(--color-gray-9);


  --code-block-text-color: var(--color-gray-1);
  --code-block-tokens-comment-color: var(--color-gray-4);
  --code-block-tokens-constant-color: var(--color-gray-1);
  --code-block-tokens-function-color: var(--color-red-4);
  --code-block-tokens-keyword-color: var(--color-magenta-4);
  --code-block-tokens-operator-color: black;
  --code-block-tokens-string-color: var(--color-green-2);

  --bg-raised-gradient: "";
  --text-color-helper: var(--color-gray-4);
  --button-color-hover: black;

  --admonition-success-bg-color: var(--color-green-9);
  --admonition-info-bg-color: var(--color-blue-9);
  --admonition-warning-bg-color: var(--color-yellow-9);
  --admonition-danger-bg-color: var(--color-red-9);
}

:root.dark {
  --link-color-primary: white;
  --link-color-visited: white;
  /* purple-7 was ~4.5:1 against the dark background, right at the AA line; purple-8 is ~6.7:1. */
  --link-color-primary-hover: var(--color-purple-8);

  --navbar-bg-color: var(--color-gray-2); /* controls search box bg */
  --modal-bg-color: var(--color-gray-2); /* controls search modal bg */
  --search-highlight-text-color: var(--color-blue-7);

  --code-block-text-color: var(--color-gray-9);
  --code-block-tokens-comment-color: var(--color-gray-7);
  --code-block-tokens-constant-color: var(--color-gray-9);
  --code-block-tokens-keyword-color: var(--color-magenta-8);
  --code-block-tokens-string-color: var(--color-blue-8);

  --md-tabs-active-tab-bg-color: var(--color-gray-4);
  --md-tabs-hover-tab-bg-color: var(--color-gray-3);

  --code-panel-bg-color: var(--color-blue-3);
  --layer-color-hover: var(--color-gray-3);
  --bg-raised-gradient: "";

  /* The base value (--color-gray-4) is tuned for the light background; dark mode
     needs the inverse end of the scale. gray-6 on gray-1 is 7.41:1, matching light
     mode's 7.23:1, so breadcrumbs are equally de-emphasized in both themes. */
  --breadcrumbs-text-color: var(--color-gray-6);
}

/* The open breadcrumb dropdown menu inherits the generic --dropdown-menu-item-color
   (--text-color-secondary: gray-9 in dark, black in light), which is brighter than
   the breadcrumb trail. Re-point the menu at the breadcrumb tokens so the trail, the
   trigger, and the open menu all read as one color in both themes. Scoped to
   breadcrumbs so the language picker and nav dropdowns are unaffected.

   Two things this rule has to live with:
   - It belongs in this theme layer, not the SCSS bundle: PurgeCSS runs with
     `variables: true`, and these tokens' var() consumers are Redocly's runtime
     styled-components under node_modules (excluded from its `content`), so a
     custom-property-only rule in the SCSS bundle gets stripped.
   - --dropdown-menu-item-color is the token that matters, not
     --dropdown-menu-text-color. The former is declared at :root as
     var(--dropdown-menu-text-color), so that var() is substituted in :root's
     context; redefining only the source token here would silently do nothing. */
[data-component-name="Breadcrumbs/BreadcrumbDropdown"] {
  --dropdown-menu-text-color: var(--breadcrumbs-text-color);
  --dropdown-menu-item-color: var(--breadcrumbs-text-color);
  --dropdown-menu-item-color-hover: var(--breadcrumbs-text-color-active);
}

:root .form-control-plaintext {
  color: var(--text-color);
}

/* CodeMirror font overrides */
.cm-theme {
  .cm-scroller {
    font-family: var(--code-block-font-family) !important;
    font-size: var(--code-block-font-size) !important;
  }
}

/* Keep active tab visually static on hover */
button[role="tab"].active {
  --md-tabs-hover-tab-bg-color: var(--md-tabs-active-tab-bg-color);
  --md-tabs-hover-tab-text-color: var(--md-tabs-active-tab-text-color);
}

/* Fix unnecessary horizontal scrolling of tables in Japanese */
[lang="ja"] table.md {
  word-break: break-word;
}
[lang="ja"] table.md th {
  min-width: 7em;
}

[data-component-name="Search/SearchTrigger"] > div {
  justify-content: start;
  width: 100%;
}

[data-component-name="Markdown/Markdown"] {
  --md-table-font-size: 14px;
  --md-table-line-height: 1.5;
}

[data-component-name="Markdown/Markdown"] td p {
  font-size: var(--md-table-font-size);
  line-height: var(--md-table-line-height);
}

@media screen and (max-width: 959.9px) {
  [data-component-name="Layout/PageLayout"] {
    flex-direction: column-reverse;
  }
  [data-component-name="Sidebar/Sidebar"] {
    display: block;
    position: static;
    height: auto;
  }
  #content {
    width: auto;
  }
  [data-component-name="Menu/MenuContainer"] {
    overscroll-behavior: auto;
  }
}

:root {
  --ai-assistant-button-bottom: 16px;
  --ai-assistant-button-right: 71px; /* align w/ Osano cookie widget (mobile) */
}

@media screen and (min-width: 990px) {
  :root {
      --ai-assistant-button-right: 86px;
  }
  [data-component-name="LanguagePicker/LanguagePicker"] {
    display: block;
  }
  [data-component-name="Search/SearchTrigger"] > button {
    display: none;
  }
  [data-component-name="Search/SearchTrigger"] > div {
    display: inline-flex;
  }
}