/* The window menu (js/window-menu.js): a raised round button at the left
   of each title bar, like the window's other buttons, drawn with PUDL's
   caret; and its stand-in on an applet's own page, a small raised button
   in the applet's top corner. Also the window bar, which the same script
   serves. */

.win-menu-btn { margin-left: -5px; }
.win-menu-btn::before {
  content: ""; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--glyph-caret) center / contain no-repeat;
  mask: var(--glyph-caret) center / contain no-repeat;
}
.win-menu { min-width: 220px; }
.win-menu-app:empty { display: none; }
/* A command that is on or off carries a check at its end while it is on. */
.win-menu [aria-checked="true"]::after, .applet-menu [aria-checked="true"]::after {
  content: "✓"; margin-left: auto; padding-left: 12px; color: var(--accent);
}
.win-menu [role="menuitemcheckbox"], .applet-menu [role="menuitemcheckbox"] { display: flex; align-items: center; width: 100%; }

/* On a page: the applet keeps its layout, and the button sits over its
   top corner. */
.has-applet-menu { position: relative; }
.applet-menu-btn {
  position: absolute; top: 6px; right: 18px; z-index: 3;
  width: 26px; height: 26px; opacity: .7;
}
.applet-menu-btn:hover, .applet-menu-btn:focus-visible { opacity: 1; }
/* In a toolbar's slot it is one of the toolbar's own buttons. */
.applet-menu-btn-slotted { position: static; opacity: 1; }
[data-applet-menu-slot] { display: inline-flex; }
[data-applet-menu-slot]:empty { display: none; }
.applet-menu-btn::before {
  content: ""; width: 12px; height: 12px;
  background: currentColor;
  -webkit-mask: var(--glyph-caret) center / contain no-repeat;
  mask: var(--glyph-caret) center / contain no-repeat;
}
.applet-menu { min-width: 200px; }

/* === The window bar (Pages/Shared/_WindowBar.cshtml) ======================
   On a page of windows, in either site's top bar: PUDL's dock of open
   windows, then minimise-all or restore-all and close-all. The dock is the
   elastic part and scrolls when the windows outnumber the room. A rule
   after it parts the bar's own controls at the right. */
.win-bar { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; margin: 0 var(--space-3); --ctl-h: 30px; }
.win-bar-dock { flex: 1 1 auto; min-width: 0; overflow-x: auto; flex-wrap: nowrap; }
.win-bar .icon-btn { flex: none; color: var(--tb-chrome-fg, currentColor); }
.win-bar .icon-btn svg { width: 15px; height: 15px; }
.win-bar .icon-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }
.win-bar .is-disabled { opacity: .45; pointer-events: none; }
/* Minimise-all and restore-all share one place: restore shows only when it
   is the useful one, every window minimised (minimise-all disabled and
   restore-all not); otherwise minimise-all shows, disabled when nothing is
   open. PUDL keeps both links' aria-disabled current. */
.win-bar .restore-all[aria-disabled="true"],
.win-bar:has(.min-all:not([aria-disabled="true"])) .restore-all { display: none; }
.win-bar:has(.min-all[aria-disabled="true"]):has(.restore-all:not([aria-disabled="true"])) .min-all { display: none; }

/* The rule before what sits at the bar's far right. With no window bar
   before it, the rule itself takes the slack. */
.topbar-rule {
  flex: none; width: 1px; height: 22px; margin: 0 var(--space-3) 0 auto;
  background: var(--tb-border, var(--border));
}
.win-bar + .topbar-rule { margin-left: 0; }
@media (max-width: 560px) {
  .win-bar { margin: 0 8px; }
  .topbar-rule { margin-right: 8px; }
}

@media (forced-colors: active) {
  .win-menu-btn::before, .applet-menu-btn::before { forced-color-adjust: none; background: ButtonText; }
}