/* ---- Style isolation reset ------------------------------------------
   Every size in this file (button min-width/height, dropdown pill widths,
   toolbar-select widths, etc.) is authored assuming border-box sizing.
   Host apps that ship a global reset (Tailwind preflight, normalize.css,
   `* { box-sizing: border-box }`) get that for free; a host with no reset
   at all falls back to the browser default `content-box`, which adds
   padding/border on top of every declared width/height instead of inside
   it. That alone is enough to make every toolbar button ~16px wider than
   intended, which cascades into the toolbar overflowing its container,
   the menu bar's dropdowns misaligning, and the horizontal auto-scroll
   having to travel much further than expected.

   Everything below is wrapped in `:where(...)`, which keeps the *selector*
   scoped to `.docx-editor-react`/`.docx-editor-host` while contributing
   ZERO specificity. That matters: without `:where()`, a selector like
   `.docx-editor-react button` (specificity class+type) would outrank a
   single-class component rule like `.docx-editor-menu-trigger`
   (specificity class-only) and silently stomp its padding — which is
   exactly the kind of self-inflicted conflict this reset exists to avoid.
   At zero specificity, this reset always loses to every other rule in
   this file (and to the host app's own classes, which can never match
   our `docx-editor-*` class names anyway), while still beating the
   browser's UA-stylesheet button/input chrome, since author-origin rules
   beat UA-origin rules regardless of specificity. */
:where(.docx-editor-react, .docx-editor-host),
:where(.docx-editor-react, .docx-editor-host) :where(*, *::before, *::after) {
  box-sizing: border-box;
}

/* Native <input>/<select>/<textarea> also disagree with each other on
   font/margin — normalize just that much. Deliberately NOT stripping their
   border/background/appearance here: a handful of native <select>/<input>
   elements outside the toolbar (Page Setup dialog, table-picker's custom
   size field) rely on their default chrome — e.g. a <select>'s native
   dropdown caret — and fully self-style via inline styles anyway, so this
   wouldn't help them. */
:where(.docx-editor-react, .docx-editor-host) :where(input, select, textarea) {
  margin: 0;
  font: inherit;
  color: inherit;
  line-height: normal;
}

/* <button>, on the other hand, is the ONLY control our toolbar/menu-bar/
   title-bar chrome is built from (every `docx-editor-toolbar-button`,
   `docx-editor-menu-trigger`, `docx-editor-dropdown__trigger`, etc. is a
   <button>), and every one of them is fully styled by our own classes —
   so it's safe to strip all of the browser's default button chrome
   (3D borders, gray background, OS-specific font/padding) rather than
   normalize it, since nothing here depends on the native look. */
:where(.docx-editor-react, .docx-editor-host) :where(button) {
  margin: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  line-height: normal;
  background: none;
  border: none;
  border-radius: 0;
  text-align: inherit;
  -webkit-appearance: none;
  appearance: none;
}
:where(.docx-editor-react, .docx-editor-host) :where(button:not(:disabled)) {
  cursor: pointer;
}