/* Theme-agnostic styling for the theme chooser itself (the dropdown in the header, the cards and buttons
   on the Themes page) and the icon contract. Everything else about the look is in docs/assets/themes/<theme>.css. */

/* ---- icons: overrides/.icons/ni/*.svg (game-icons.net, CC BY 3.0) inlined by pymdownx.emoji as
   <span class="twemoji icon|icon-lg|icon-xl"><svg fill="currentColor">. A theme colours them by setting
   --ni-icon (every icon) and optionally --ni-icon-disc (the plate behind big ones). ---- */
.md-typeset .twemoji svg { fill: currentColor; }
.md-header__button.md-logo svg { fill: var(--md-accent-fg-color); }   /* the campfire in the header takes the theme's accent */
.md-typeset .twemoji.icon { color: var(--ni-icon, var(--md-typeset-a-color)); height: 1.3em; width: 1.3em; vertical-align: -0.3em; margin-right: 0.2em; }
.md-typeset .twemoji.icon svg { height: 100%; width: 100%; }
.md-typeset .twemoji.icon-lg, .md-typeset .twemoji.icon-xl { color: var(--ni-icon, var(--md-typeset-a-color)); display: inline-grid; place-items: center;
  background: var(--ni-icon-disc, var(--md-accent-fg-color--transparent)); border-radius: 50%; vertical-align: middle; }
.md-typeset .twemoji.icon-lg { height: 3.2em; width: 3.2em; margin-right: 0.35em; }
.md-typeset .twemoji.icon-lg svg { height: 2.1em; width: 2.1em; }
.md-typeset .twemoji.icon-xl { height: 7.5rem; width: 7.5rem; }
.md-typeset .twemoji.icon-xl svg { height: 5rem; width: 5rem; }
.md-typeset .infobox .twemoji.icon-xl { display: grid; margin-left: auto; margin-right: auto; margin-bottom: 0.4rem; }
.md-typeset .gallery .twemoji.icon-lg { display: grid; margin: 0 auto 0.4rem; height: 4.4em; width: 4.4em; }
.md-typeset .gallery .twemoji.icon-lg svg { height: 2.8em; width: 2.8em; }
.md-typeset table .twemoji.icon { margin-right: 0; }
.ni-credits { font-size: 0.64rem; color: var(--md-footer-fg-color--light); text-align: center; padding: 0.4rem 0.8rem 0.8rem; }
.ni-credits a { color: inherit; text-decoration: underline; }

.ni-theme-select {
  margin: 0 0.5rem; padding: 0.15rem 1.4rem 0.15rem 0.5rem; max-width: 10rem;
  font: inherit; font-size: 0.72rem; color: inherit; background: transparent;
  border: 1px solid currentColor; border-radius: 4px; opacity: 0.85; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%23ffffff'/></svg>");
  background-repeat: no-repeat; background-position: right 0.45rem center;
}
.ni-theme-select:hover, .ni-theme-select:focus { opacity: 1; outline: none; }
.ni-theme-select option { color: #1b1b1b; background: #ffffff; }
@media (max-width: 44em) { .ni-theme-select { display: none; } }   /* the Themes page still works on phones */

.theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; margin: 1rem 0 2rem; }
.theme-card { border: 1px solid currentColor; border-radius: 8px; padding: 0.9rem 1rem 1rem; opacity: 0.95; }
.theme-card h3 { margin: 0 0 0.3rem !important; }
.theme-card h3::before { content: none !important; }
.theme-card .theme-inspiration { font-size: 0.78rem; opacity: 0.8; margin: 0.3rem 0 0.7rem; }
.theme-card p { margin: 0.3rem 0; }

.md-typeset a.ni-theme-pick, .md-typeset a.ni-theme-pick:visited {
  display: inline-block; padding: 0.3rem 0.8rem; border: 1px solid currentColor; border-radius: 999px;
  font-size: 0.8rem; font-weight: 600; text-decoration: none; cursor: pointer; background: transparent;
}
.md-typeset a.ni-theme-pick:hover { opacity: 0.8; }
.md-typeset a.ni-theme-pick.is-current::after { content: " ✓ current"; font-weight: 400; opacity: 0.8; }
.ni-theme-current { font-style: italic; opacity: 0.85; }