/* Redoc in the platform's look. Redoc 3 derives its whole design system from a few base variables; they are pointed
   at the platform tokens (tokens.css), which already switch with the theme. The `html` in the selectors outranks
   Redoc's own `:root` and `:root.dark`, injected after this file. */
html:root,
html:root.dark {
    --font-family-base: var(--pc-font);
    --font-family-monospaced: var(--pc-mono);
    --heading-font-family: var(--pc-head);

    --bg-color: var(--pc-bg);
    --bg-color-raised: var(--pc-bg);
    --bg-color-tonal: var(--pc-bg2);
    --text-color-primary: var(--pc-fg);
    --text-color-secondary: var(--pc-fg2);
    --text-color-description: var(--pc-fg2);
    --text-color-helper: var(--pc-muted);
    --border-color-primary: var(--pc-line2);
    --border-color-secondary: var(--pc-line);
    --border-radius: 2px;
    /* Code sits on the platform's code colour, a shade darker than the page (Redoc's layer is lighter). */
    --layer-color: var(--pc-code-bg);
    --inline-code-bg-color: var(--pc-code-bg);
    --inline-code-text-color: var(--pc-fg);
    --code-block-text-color: var(--pc-fg);

    --color-primary-base: var(--pc-accent);
    --color-primary-hover: var(--pc-accent2);
    --color-primary-bg: var(--pc-accent-bg);
    --color-primary-text: var(--pc-accent);
    --link-color-primary: var(--pc-accent);
    --link-color-primary-hover: var(--pc-accent2);
    --color-success-base: var(--pc-ok);
    --color-error-base: var(--pc-bad);
    --color-warning-base: var(--pc-warn);
    --input-content-placeholder-color: var(--pc-muted);
    /* The sidebar's layout switch and collapse button, in the search field's colours. */
    --segmented-buttons-bg-color-main: var(--pc-bg2);
    --segmented-buttons-bg-color-inner: var(--pc-bg);
    --button-border-color: var(--pc-line2);
    /* Redoc's dialogs, popovers and their overlay open above the page's fixed navbar, tabs and banner (z 1028-1030). */
    --z-index-popover: 1040;
    --z-index-overlay: 1040;
}

/* HTTP methods in the platform's status colours: Redoc's own GET green and PUT orange are too light to read. */
html:root :is(.tag-get, .tag-post, .tag-put, .tag-patch, .tag-delete),
html:root.dark :is(.tag-get, .tag-post, .tag-put, .tag-patch, .tag-delete) {
    --tag-color: var(--pc-accent);
    --tag-bg-color: var(--pc-accent-bg);
}

html:root .tag-get,
html:root.dark .tag-get {
    --tag-color: var(--pc-ok);
    --tag-bg-color: var(--pc-ok-bg);
}

html:root :is(.tag-put, .tag-patch),
html:root.dark :is(.tag-put, .tag-patch) {
    --tag-color: var(--pc-warn);
    --tag-bg-color: var(--pc-warn-bg);
}

html:root .tag-delete,
html:root.dark .tag-delete {
    --tag-color: var(--pc-bad);
    --tag-bg-color: var(--pc-bad-bg);
}

/* The colour mode follows the navbar's switch; Redoc's own switch would be a second one. Redoc's "API docs by
   Redocly" link and the "Copy for LLM" page actions by every heading have no option to turn them off. */
#redoc-container :is(
    [data-testid="color-mode-switcher"],
    [data-testid="page-actions"],
    :has(> a[href="https://redocly.com/redoc/"])
) {
    display: none;
}

/* The sidebar actions sit at the top of the menu instead of its footer, as a toolbar over the search field: on its
   edges (collapse on the left, layout on the right) and 28px tall, like the field's other controls. */
#redoc-container div:has(> span > [data-component-name="Sidebar/SidebarActions"]) {
    order: -1;
    position: static;
    padding: 16px 16px 0;
}

#redoc-container span:has(> [data-component-name="Sidebar/SidebarActions"]) {
    flex: 1;
    gap: 0;
}

#redoc-container [data-component-name="Sidebar/SidebarActions"] {
    flex: 1;
    justify-content: space-between;
    align-items: center;
}

#redoc-container [data-component-name="Sidebar/SidebarActions"] button {
    padding: 6px;
}

#redoc-container [data-component-name="Sidebar/SidebarActions"] > span > span {
    padding: 4px;
}