/*
 * Copyright © 2026 Krzysztof Kasprowicz
 * Licensed under the Apache License, Version 2.0. See LICENSE in the project root for license information.
 * Project repository: https://github.com/Krzysztof318/MailFathom
 */

/* Almost everything here belongs to the two additions `main.js` makes. The rest of the appearance is
   the `modern` template's, deliberately: a theme of our own would be one more thing to carry forward
   across docfx versions, and this site has no design problem that the default one fails to solve. */

/* The exception, and it is the template's gap rather than a preference. `modern` styles
   `.navbar-brand` and nothing inside it, because its own logo is an SVG whose intrinsic size already
   fits a header; a raster logo arrives at whatever size the file is, which put a 180-pixel square
   over the top of every page. The height is stated and the width follows the aspect ratio, so
   replacing the file with one of different proportions changes nothing here. */
.navbar-brand > #logo {
  height: 1.75rem;
  width: auto;
  margin-inline-end: 0.5rem;
}

.mf-version-picker {
  /* `flex-nowrap` on the header's container makes every child shrinkable, and a select that shrinks
     to its container reads as a sliver rather than as a control. */
  flex: 0 0 auto;
  width: auto;

  /* The picker sits in `#navbar`, in front of the icon links, and this is what carries it to that end
     of the header rather than leaving it against the section links. */
  margin-inline-start: auto;
  margin-inline-end: 0.5rem;
}

/* `modern` pushes the icon links to that same end with an auto margin of its own, and a flex row divides
   its free space equally among every auto margin on it rather than spending it at the first: two of them
   leave the picker stranded mid-header with the icons half a gap further on. Withdrawing the template's
   margin leaves the picker's as the only claim on that space, so it travels to that end and the icon
   links follow immediately. Below the navbar's breakpoint `modern` replaces that margin with
   `margin: 1rem 0`, whose left margin is this same zero, so the collapsed panel is unaffected.

   The selector is the template's own, `.navbar` and all, because a declaration is only withdrawn by one
   that matches its specificity — `#navbar form.icons` carries one class fewer and loses however late it
   is read. `margin-left` for the same reason: it is the property `modern` declares, so cancelling it
   takes nothing on trust about how a logical property reaches a physical one through the cascade. */
.navbar #navbar form.icons {
  margin-left: 0;
}

/* Below the navbar's breakpoint `#navbar` becomes a column and the auto margin above would push the
   picker against the right edge of an otherwise left-aligned panel. `order` places it after the section
   links and ahead of the search box, which `modern` orders at 30 and the icon links at 40. */
@media (max-width: 767.98px) {
  .mf-version-picker {
    order: 20;
    align-self: stretch;
    margin-inline: 0;
    margin-block-start: 1rem;
  }
}

.mf-version-notice {
  margin-bottom: 1.5rem;
}

/* The affordance matters more than usual here: a Mermaid diagram looks like a picture rather than
   like a control, so nothing else on the page suggests that it opens. */
article img[src],
article pre.mermaid {
  cursor: zoom-in;
}

.mf-viewer {
  position: fixed;
  inset: 0;
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgb(0 0 0 / 80%);
  touch-action: none;
  overscroll-behavior: contain;
}

.mf-viewer[hidden] {
  display: none;
}

.mf-viewer-stage {
  cursor: grab;

  /* A figure zoomed past the viewport is panned around, so the stage keeps the width its contents ask
     for instead of being shrunk back into the space a flex item is offered. */
  flex: 0 0 auto;
  transform-origin: center center;

  /* The transform this promotes a layer for carries the panning alone. The zoom is a width `main.js`
     sets, which is what stops the enlargement from being a stretch of the bitmap this layer holds. */
  will-change: transform;
}

.mf-viewer-panning .mf-viewer-stage {
  cursor: grabbing;
}

/* The frame the figure sits in, sized to whatever the figure currently is. The padding is a constant
   border around the drawing rather than part of it, which is why the zoom is carried by the figure
   inside the frame and not by the frame itself. */
.mf-viewer-frame {
  width: fit-content;
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  padding: 1rem;
}

.mf-viewer-frame > * {
  margin: 0;
}

/* The `<pre>` a Mermaid diagram arrives in carries the article's width and the article's answer to a
   drawing wider than it. Both belong to the page rather than to the viewer, and left in place they
   would hold the SVG at the width the reader opened the viewer to get past. */
.mf-viewer-frame > pre {
  width: max-content;
  max-width: none;
  padding: 0;
  overflow: visible;
}

.mf-viewer-frame img {
  display: block;
}

.mf-viewer-controls {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: 0.25rem;
  padding: 0.25rem;
  background: var(--bs-body-bg);
  border-radius: 0.5rem;
  box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 30%);
}

body.mf-viewer-open {
  overflow: hidden;
}