/*
 * guides.css — styling for the Stoplight Elements guides overlay.
 *
 * Strategy: reuse Stoplight's own CSS custom properties (theme tokens) so the
 * guide links and overlay match light/dark themes automatically. The guide
 * markup already reuses Stoplight utility classes; this file only adds the
 * active/hover states and the overlay show/hide behaviour.
 */

/* ----- Sidebar guide links ------------------------------------------------ */

/* Hover state — mirrors Stoplight's TOC hover (sl-bg-canvas-200). */
.guides-toc-row:hover {
  background-color: var(--color-canvas-200);
}

/* Active state — mirrors Stoplight's active TOC highlight (sl-bg-primary-tint). */
.guides-toc-row--active,
.guides-toc-row--active:hover {
  background-color: var(--color-primary-tint);
}

/* ----- Active-guide overlay ---------------------------------------------- */

/* The overlay is appended next to Stoplight's content pane and hidden by
 * default. When a guide is active we hide Stoplight's pane and show ours. */
#guides-overlay {
  display: none;
}

body.guides-active #guides-overlay {
  display: block;
}

/* Hide Stoplight's real content pane (the flex child of the app row that is
 * NOT our overlay) while a guide is shown. The pane is a direct child of
 * `.sl-elements-api.sl-flex` alongside the sidebar column. */
body.guides-active
  .sl-elements-api.sl-flex
  > .sl-overflow-y-auto.sl-flex-1.sl-bg-canvas:not(#guides-overlay) {
  display: none !important;
}

/* While a guide is active, clear Stoplight's own active highlight (it still
 * thinks the underlying path — e.g. Overview — is selected). */
body.guides-active
  .ElementsTableOfContentsItem:not(.guides-toc-item)
  .sl-bg-primary-tint {
  background-color: transparent !important;
}

#guides-overlay img {
    max-width: 900px;
}

#guides-overlay code {
    background-color: rgba(5, 21, 36, 0.06);
    border: 1px solid rgba(181, 194, 217, 0.5);
    border-radius: 3px;
    padding: 2px 4px;
    font-size: 80%;
}

#guides-overlay blockquote {
    background-color: rgba(5, 21, 36, 0.06);
    border: 1px solid rgba(181, 194, 217, 0.5);
    border-left: 5px solid gray;
    border-radius: 3px;
    padding: 2px 10px;
    font-size: 80%;
}