/*
 * .SYNOPSIS
 * modifiers.css - reading options that apply on top of whichever theme is
 * selected. Loaded last so these always win over the theme defaults.
 *
 * .USAGE
 *   Loaded in this order by MarkstrataWebPart.ts, because later rules
 *   override earlier ones:
 *
 *     base, typography, code, syntax, callouts, tables-lists, extras,
 *     chrome, the three themes, modifiers, print
 *
 * .NOTES
 * Since:     0.0.6
 * Ships in:  the web part bundle
 * Requires:  nothing else in this project
 * Loaded:    after the themes, so a reader option always wins
 */

/* ----------------------------------------------------------------- density */

.strata-root[data-strata-density='compact'] {
  --strata-density-scale: 0.88;
}

.strata-root[data-strata-density='relaxed'] {
  --strata-density-scale: 1.12;
}

/* --------------------------------------------------------------- text size */

.strata-root[data-strata-size='small'] { --strata-font-scale: 0.9; }
.strata-root[data-strata-size='large'] { --strata-font-scale: 1.12; }
.strata-root[data-strata-size='xlarge'] { --strata-font-scale: 1.25; }

/* ------------------------------------------------------------ line measure */

.strata-root[data-strata-width='narrow'] { --strata-content-max-width: 680px; }
.strata-root[data-strata-width='wide'] { --strata-content-max-width: 1100px; }
.strata-root[data-strata-width='full'] { --strata-content-max-width: none; }

/* --------------------------------------------------------------- code size */

.strata-root[data-strata-code-size='small'] { --strata-code-font-size: 0.8em; }
.strata-root[data-strata-code-size='large'] { --strata-code-font-size: 0.95em; }

/* ------------------------------------------------------------- fill height */

/*
 * "Fill the available height" gives the web part at least the room below it,
 * so a short document does not stop halfway down and leave the page canvas
 * showing underneath. The height is measured in ContentEnhancer, not written
 * here as 100vh: a SharePoint page does not scroll the window, it scrolls an
 * inner container under a header and a command bar, so a viewport unit
 * overshoots by however tall that chrome is.
 *
 * All the stylesheet does is decide where the extra room goes. Laying the root
 * out as a column and letting the document take the slack puts it between the
 * text and the file footer, so the footer sits at the bottom of the web part
 * rather than under a gap.
 *
 * Not while the page is being edited: there the root holds the split editor,
 * which sizes itself.
 */
.strata-root[data-strata-fill='window'][data-strata-editing='false'] {
  display: flex;
  flex-direction: column;
}

.strata-root[data-strata-fill='window'][data-strata-editing='false'] > .strata-layout {
  flex: 1 1 auto;
}

/* Respect the reader's motion preference for the few transitions we use. */
@media (prefers-reduced-motion: reduce) {
  .strata-root * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}