/* NDepend.API docs: visual overrides on top of the DocFX "modern" template.
   Edit here, then run  build.cmd css  (seconds) instead of a full build. */

/* Header logo: NDepend gear, same box as the DocFX placeholder logo. The build splits the brand link:
   the gear goes to https://www.ndepend.com, the "NDepend.API" text to the API home. */
#logo { width: 51px; height: 51px; }
.navbar-brand.navbar-brand-logo { margin-right: .35rem; }

/* Top bar "Back to ndepend.com" (added by the build): a quiet outlined pill right after the
   "NDepend.API" title, where readers look for the way back to the site. */
#navpanel { align-items: center; }
#navpanel > .back-to-site {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  margin: 0 1rem 0 .25rem;
  padding: .15rem .55rem;
  border: 1px solid var(--bs-border-color);
  border-radius: 999px;
  font-size: .54rem;
  color: var(--bs-body-color);
  text-decoration: none;
  white-space: nowrap;
}
#navpanel > .back-to-site:hover { color: var(--bs-link-color); border-color: var(--bs-link-color); }
@media (max-width: 767.98px) {
  #navpanel > .back-to-site { margin: .5rem 0; align-self: flex-start; }
}

/* Counts next to section headings (Properties (12)...) */
article .count { color: var(--bs-secondary-color); font-weight: normal; }

/* Code element icons. PNGs are pre-shrunk to the exact displayed size (16px lists, 32px titles). */
[data-kind]::before {
  content: '';
  display: inline-block;
  flex: none;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  background: no-repeat 0 0 / 16px 16px;
}
article h1[data-kind]::before {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: -3px;
  background-size: 32px 32px;
}
[data-kind="namespace"]::before { background-image: url(icons/namespace-16.png); }
article h1[data-kind="namespace"]::before { background-image: url(icons/namespace-32.png); }
[data-kind="class"]::before { background-image: url(icons/class-16.png); }
article h1[data-kind="class"]::before { background-image: url(icons/class-32.png); }
[data-kind="interface"]::before { background-image: url(icons/interface-16.png); }
article h1[data-kind="interface"]::before { background-image: url(icons/interface-32.png); }
[data-kind="struct"]::before { background-image: url(icons/struct-16.png); }
article h1[data-kind="struct"]::before { background-image: url(icons/struct-32.png); }
[data-kind="enum"]::before { background-image: url(icons/enum-16.png); }
article h1[data-kind="enum"]::before { background-image: url(icons/enum-32.png); }
[data-kind="delegate"]::before { background-image: url(icons/delegate-16.png); }
article h1[data-kind="delegate"]::before { background-image: url(icons/delegate-32.png); }
[data-kind="ctor"]::before { background-image: url(icons/ctor-16.png); }
article h1[data-kind="ctor"]::before { background-image: url(icons/ctor-32.png); }
[data-kind="method"]::before { background-image: url(icons/method-16.png); }
article h1[data-kind="method"]::before { background-image: url(icons/method-32.png); }
[data-kind="property"]::before { background-image: url(icons/property-16.png); }
article h1[data-kind="property"]::before { background-image: url(icons/property-32.png); }
[data-kind="field"]::before { background-image: url(icons/field-16.png); }
article h1[data-kind="field"]::before { background-image: url(icons/field-32.png); }
[data-kind="event"]::before { background-image: url(icons/event-16.png); }
article h1[data-kind="event"]::before { background-image: url(icons/event-32.png); }

/* Tree: child count on the right of each parent, e.g. "IMethod (60)". */
#toc a[data-count]::after {
  content: ' (' attr(data-count) ')';
  color: var(--bs-secondary-color);
}

/* Search matches: tree filter, top search results, and a page opened from a search result.
   Painted with the CSS Custom Highlight API, see main.js. */
::highlight(ndepend-match) {
  background-color: #ffe14d;
  color: #000;
}
[data-bs-theme=dark] ::highlight(ndepend-match) {
  background-color: #8a6d00;
  color: #fff;
}
/* The template bolds only the first match in search results; the highlight now marks all of them. */
#search-results .sr-item b { font-weight: inherit; }

/* Tree toolbar at the right of the tree filter (added by main.js): Back, Forward, Collapse all. */
#toc { position: relative; }
#toc > form.filter { margin-right: 106px; }
#toc > .tree-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  gap: 2px;
}
#toc > .tree-toolbar > .btn {
  width: 32px;
  height: 38px;
  padding: 0;
  color: var(--bs-secondary-color);
}
#toc > .tree-toolbar > .btn:hover:not(:disabled) { color: var(--bs-emphasis-color); background-color: var(--bs-tertiary-bg); }
#toc > .tree-toolbar > .btn:disabled { opacity: .35; }

/* Tree member nodes (one page per type): plain text from the template, made links by main.js.
   The template styles plain-text nodes as small bold headings: reset to the look of the other entries. */
#toc span.name-only {
  font-weight: normal;
  display: inline;
  margin: 0;
}
#toc .name-only[data-anchor] {
  color: var(--bs-body-color) !important;
  cursor: pointer;
}
#toc .name-only[data-anchor]:hover { text-decoration: underline; }
#toc .name-only.current { color: var(--bs-link-color) !important; }

/* ---- Page layout ---------------------------------------------------------------------------------
   The build wraps .content and .affix in .scroll-area (tools/postprocess.cs). On desktop the middle
   .content is the only scrolling part, its scrollbar right next to it, below the top bar; the tree and the
   right outline are fixed columns with their own scrolling when too long.
   The template rules written for .content/.affix as direct children of main are re-applied here.
   Phones keep the normal page scrolling. */
:root { --page-side: .75rem; }
@media (min-width: 1400px) { :root { --page-side: calc((100vw - 1320px) / 2 + .75rem); } }

/* Top bar aligned on the columns: gear left = tree left, search right = right outline right.
   (The template top bar container is wider than the 1320px band the columns are centered in.) */
body > header .container-xxl {
  max-width: none;
  padding-left: var(--page-side);
  padding-right: var(--page-side);
}

body > main > .scroll-area { display: flex; flex: 1; min-width: 0; }
.scroll-area > .content { display: flex; flex-direction: column; flex: 1; min-width: 0; margin: 0 3rem; padding-bottom: 2rem; }
.scroll-area > .content > .actionbar { display: flex; align-items: flex-start; margin-top: .5rem; }
.scroll-area > .content > .actionbar > button { margin-top: -.65em; margin-left: -.8em; }
.scroll-area > .content article { flex: 1; }
.scroll-area > .content > .contribution,
.scroll-area > .content > .next-article { display: flex; }
.scroll-area > .affix { display: block; flex: none; width: 230px; overflow-x: hidden; overflow-y: auto; }
@media (max-width: 991.98px) { .scroll-area > .content { margin: 0 1rem; } }
@media (max-width: 767.98px) { .scroll-area > .content { margin: 0; } }
@media (max-width: 1140px) { .scroll-area > .affix { display: none; } }

@media screen and (min-width: 768px) {
  html, body { height: 100%; overflow: hidden; }
  body { min-height: 0; }
  body:not([data-search])[data-layout=""] > main,
  body:not([data-search])[data-layout="conceptual"] > main {
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0;
    padding: 0 0 0 var(--page-side);
  }
  body:not([data-search])[data-layout=""] > main > .toc-offcanvas,
  body:not([data-search])[data-layout="conceptual"] > main > .toc-offcanvas {
    position: static;
    max-height: none;
    height: 100%;
    padding-top: 1.6rem;
  }
  body > main > .scroll-area {
    overflow: hidden;
    padding-right: var(--page-side);
  }
  .scroll-area > .content {
    overflow-y: auto;
    scrollbar-gutter: stable;
    margin: 0 0 0 3rem;
    padding: 1.6rem 2rem 2rem 0;
  }
  .scroll-area > .content:focus { outline: none; }
  .scroll-area > .affix {
    overflow-y: auto;
    margin-left: 1rem;
    padding-top: 1.6rem;
  }
  .scroll-area article [id] { scroll-margin-top: 1rem; }
  body[data-search] > .search-results { overflow-y: auto; min-height: 0; }
}
@media screen and (min-width: 768px) and (max-width: 991.98px) {
  .scroll-area > .content { margin-left: 1rem; padding-right: 1rem; }
}