/* The format bar (design/v5/V5Work.dc.html), at the bottom of the pane being typed in (UI-12,
   design/runs/UI-12/), and the popovers over it: colour, highlight, alignment and the table size. */

/* the dock: 20 from the window's bottom, centred on its pane, over the bottom fade (fmt-dock.js). It slides
   between panes and with the note on `translate` (core/motion.js), so its centring is a transform */
.fmt-dock {
  position: absolute;
  z-index: 5;
  bottom: 20px;
  left: 50%;
  width: max-content;
  transform: translateX(-50%);
}
.fmt-wrap { position: relative; }
.fmt {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  height: 36px;
  /* (a pill's padding, UI-10: its buttons 4 from every edge, 3 inside its hairline) */
  padding: 0 3px;
  border-radius: 18px;
}
.fmt-group { display: flex; gap: 2px; }
.fmt-sep { flex: none; width: 1px; height: 16px; margin: 0 6px; background: var(--sep); }
.fmt .tool {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  color: var(--fg);
}
.fmt .tool[aria-expanded="true"] { background-color: var(--sel); }
/* can't act on this selection (Collapse into Section with nothing to collapse): shown, not hidden (§7),
   no hover or press fill; its tooltip says why */
.fmt .tool[aria-disabled] { color: var(--faint); }
.fmt .tool[aria-disabled]:is(:hover, :active) { background-color: transparent !important; }
.fmt .tc-bar { fill: var(--tc-red); }
.fmt .hl-bar { fill: var(--hl-yellow); }

/* popovers: solid enough to read over the note. Each rises from over the bar and goes back down there
   (UI-9h, UI-12, workspace/toolbar.js), so its paint is on the reveal's carrier (`.fmt-pop-in`) */
.fmt-pop {
  position: absolute;
  z-index: 8;
  bottom: calc(100% + 4px);
  left: 50%;
  box-sizing: border-box;
  border-radius: 14px;
  translate: -50% 0;
}
.fmt-pop.closing { pointer-events: none; }
.rv.fmt-pop-in { display: block; box-sizing: border-box; padding: 10px 12px 12px; border-radius: 14px; background: var(--solid); }
.fmt-pop[hidden] { display: none; }
/* its button went into ⋯: over the bar's right end */
.fmt-pop.fmt-pop-end { right: 0; left: auto; translate: none; }
/* a group in ⋯ takes the separator before it along (core/toolbar-fit.js: ⋯ More is the bar's last group) */
.fmt-sep:has(+ .fmt-group.tb-gone) { display: none; }
.fmt-pop-tc,
.fmt-pop-hl { width: 260px; }
.fmt-pop-al { width: 160px; }
/* (its rows 4 in from its edge with a row's corners, as every menu's: its hairline takes the other 1. They sat 7 in, UI-11 sweep #8) */
.fmt-pop-al .rv.fmt-pop-in { padding: 3px; }
.fmt-pop-al .fmt-mi { border-radius: 10px; }
.fmt-pop-al .fmt-pop-body { display: flex; flex-direction: column; }
.fmt-pop-head { display: flex; justify-content: space-between; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
.fmt-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.fmt-mi {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  color: var(--fg);
  font: 13px var(--font-ui);
  text-align: left;
  white-space: nowrap;
}
.fmt-mi-label { flex: 1; }
.fmt-mi-key { color: var(--faint); font-size: 11px; }
.fmt-mi[aria-checked="true"] { background-color: var(--sel); }

.swatch {
  display: grid;
  flex: none;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1.5px solid var(--sep);
  border-radius: 13px;
  background: var(--fill);
  color: var(--muted);
  font: 600 13px/1 var(--font-ui);
}
@media (hover: hover) { .swatch:hover { border-color: var(--fg); } }

.swatch[data-tc="red"] { color: var(--tc-red); }
.swatch[data-tc="orange"] { color: var(--tc-orange); }
.swatch[data-tc="green"] { color: var(--tc-green); }
.swatch[data-tc="blue"] { color: var(--tc-blue); }
.swatch[data-tc="purple"] { color: var(--tc-purple); }
.swatch[data-tc="gray"] { color: var(--tc-gray); }
.swatch[data-hl="yellow"] { background: var(--hl-yellow); }
.swatch[data-hl="green"] { background: var(--hl-green); }
.swatch[data-hl="blue"] { background: var(--hl-blue); }
.swatch[data-hl="pink"] { background: var(--hl-pink); }
.swatch[data-hl="orange"] { background: var(--hl-orange); }