/* The rules of the documentation page.
 *
 * The page loads this file after `swagger-ui.css`, so a rule here wins over a
 * rule of the package with the same weight. The file holds no rule that
 * changes a color of a Swagger UI element: the dark theme is the theme of the
 * package, under the class `dark-mode` on the html element, and the light
 * theme is the default of the package.
 *
 * Each `url(...)` below is relative. A browser resolves it against the URL of
 * this file, `<page path>/askpilot-docs.css`, so each mark reaches
 * `<page path>/<name>.svg` in PRODUCTION and under the hidden path. This file
 * knows no path, and no rule names a host.
 */

/* The Askpilot mark on the left of the h1. `1em` is the computed font size of
 * the h1, 36px in `swagger-ui.css`, so the mark is as high as the font. The
 * image is the icon that the service gives at the root. */
.swagger-ui .info .title::before{content:"";display:inline-block;width:1em;height:1em;margin-right:0.35em;vertical-align:-0.14em;background:url(/favicon-96x96.png) center/contain no-repeat}

/* The 2 links under the h1. Swagger UI renders the OpenAPI link, and the plugin
 * of `askpilot-docs.js` renders the SDK link after it, in the same group. The
 * box of the mark is the same for the 2, and the image differs.
 *
 * The font size of a link in this group is 12px. A mark of 16px sits on the
 * middle of that text at -5px from the baseline. */
.swagger-ui .info hgroup.main a.link::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 0.5em;
  vertical-align: -5px;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

/* The OpenAPI mark. `:not(.askpilot-sdk-link)` keeps the rule off the SDK link,
 * which carries the class `link` too. */
.swagger-ui .info hgroup.main a.link:not(.askpilot-sdk-link)::before {
  background-image: url(openapi-logo.svg);
}

/* The SDK link sits on its own line, under the OpenAPI link. It keeps the size
 * and the colors of the package: the class `link` gives it those. */
.swagger-ui .info hgroup.main a.askpilot-sdk-link {
  display: block;
  margin-top: 6px;
}

.swagger-ui .info hgroup.main a.askpilot-sdk-link::before {
  background-image: url(python-logo.svg);
}

/* The dark theme swaps the OpenAPI mark for the white treatment. The dark gray
 * barbell of the color mark is not visible on `#1c2022`, and the white
 * treatment is the treatment of the OpenAPI Initiative for a dark background.
 *
 * The Python mark does not change: blue and yellow read well on both themes.
 * The selector holds `:not(.askpilot-sdk-link)` for that reason. A dark rule
 * that named each link of the group would have more weight than the rule of
 * the Python mark, and the SDK link would then show the OpenAPI mark. */
html.dark-mode .swagger-ui .info hgroup.main a.link:not(.askpilot-sdk-link)::before {
  background-image: url(openapi-logo-white.svg);
}

/* The toggle button of the theme. It is a fixed element of the page, and not a
 * Swagger UI component: a re-render of Swagger UI cannot remove it, and a
 * layout change of the package cannot move it.
 *
 * The colors are the neutral colors of the 2 themes of the package. */
.askpilot-theme-toggle {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid #d9dde1;
  border-radius: 50%;
  background: #fff;
  color: #3b4151;
  cursor: pointer;
}

.askpilot-theme-toggle:hover {
  border-color: #4990e2;
}

.askpilot-theme-toggle:focus-visible {
  outline: 2px solid #4990e2;
  outline-offset: 2px;
}

.askpilot-theme-toggle svg {
  display: block;
  width: 20px;
  height: 20px;
}

html.dark-mode .askpilot-theme-toggle {
  border-color: #545d61;
  background: #2a2e30;
  color: #e4e6e6;
}

html.dark-mode .askpilot-theme-toggle:hover {
  border-color: #51a8ff;
}

html.dark-mode .askpilot-theme-toggle:focus-visible {
  outline-color: #51a8ff;
}

/* A printed page has no button to press. */
@media print {
  .askpilot-theme-toggle {
    display: none;
  }
}

/* On a narrow screen the h1 wraps, and its first line can reach the button.
 * The padding keeps the title clear of it. */
@media (max-width: 360px) {
  .swagger-ui .info hgroup.main {
    padding-right: 48px;
  }
}