/* ---- Toolbar: a full-width white backdrop row containing a rounded,
   gray-filled inner pill, Google-Docs style. Split into two layers so
   each can be colored independently: the outer row is white (matches the
   title/menu bar above it), and the inner pill is the gray surface the
   icons sit on. ---------------------------------------------------------- */
.docx-editor-toolbar-row {
  padding: 10px 16px;
  background: var(--de-surface);
  flex-shrink: 0;
}

.docx-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 6px 10px;
  background: var(--de-surface-hover);
  border: 1px solid var(--de-toolbar-border);
  border-radius: 20px;
  /* Flat, matching Google Docs — no drop shadow/elevation. A gray pill
     with a thin border reads clearly against the white backdrop row
     without looking like an elevated floating card. */
  box-shadow: none;
  /* Horizontal scroll for narrow viewports, but hide the scrollbar visually.
     The toolbar is still scrollable via wheel/touch/trackpad. */
  overflow-x: auto;
  overflow-y: hidden; /* no vertical scrollbar ever */
  /* Hide scrollbar in Firefox */
  scrollbar-width: none;
  /* Hide scrollbar in WebKit/Chrome */
  scrollbar-height: none;
  flex-shrink: 0;
  flex-wrap: nowrap;
  position: relative;
  z-index: 50;
}
/* Hide scrollbar in WebKit/Chrome/Safari */
.docx-editor-toolbar::-webkit-scrollbar {
  display: none;
  height: 0;
  width: 0;
}

/* A group is just a flat run of buttons — a single row, no visible
   caption (category names are exposed as a hover tooltip instead, see
   ToolbarGroup's `title`/`aria-label`), matching a compact, single-row
   toolbar rather than a labelled ribbon. */
.docx-editor-toolbar-group {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 4px;
  flex-shrink: 0;
}
/* Short, vertically-centered divider between groups — not a full-height
   rule — so the bar reads as one continuous row of tools. */
.docx-editor-toolbar-group + .docx-editor-toolbar-group {
  position: relative;
  margin-left: 10px;
  padding-left: 12px;
}
.docx-editor-toolbar-group + .docx-editor-toolbar-group::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 24px;
  background: #dadce0;
}

.docx-editor-toolbar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 30px;
  height: 32px;
  padding: 0 8px;
  border: none;
  background: var(--de-toolbar-button-bg);
  color: var(--de-toolbar-button-fg);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 80ms ease, color 80ms ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.docx-editor-toolbar-button:hover:not(:disabled) {
  background: var(--de-toolbar-button-bg-hover);
}
.docx-editor-toolbar-button[data-active="true"] {
  background: var(--de-toolbar-button-bg-active);
  color: var(--de-toolbar-button-fg-active);
}
.docx-editor-toolbar-button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.docx-editor-toolbar-button--icon {
  padding: 0;
  width: 32px;
}
.docx-editor-toolbar-button--with-text {
  padding: 0 12px;
}

/* Small SVG icons inside toolbar buttons */
.docx-editor-toolbar-button svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* The scrollable, formatting-tool part of the toolbar — everything except
   the mode switcher, which must stay clickable even in Viewing mode. */
.docx-editor-toolbar__tools {
  display: flex;
  align-items: center;
  gap: 0;
  flex-shrink: 0;
}
.docx-editor-toolbar__tools[data-view-only="true"] {
  opacity: 0.45;
  filter: grayscale(35%);
  pointer-events: none;
}

/* Mode switcher docks to the far right of the toolbar. */
.docx-editor-toolbar__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 12px;
}

.docx-editor-mode-switcher__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--de-border-raw);
  border-radius: 16px;
  background: var(--de-toolbar-button-bg);
  color: var(--de-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 80ms ease, border-color 80ms ease;
}
.docx-editor-mode-switcher__trigger:hover {
  background: var(--de-toolbar-button-bg-hover);
}
.docx-editor-mode-switcher__trigger[data-mode="suggesting"] {
  color: #b45309;
  border-color: #fcd34d;
  background: #fffbeb;
}
.docx-editor-mode-switcher__trigger[data-mode="viewing"] {
  color: var(--de-text-muted);
}
.docx-editor-mode-switcher__trigger--locked {
  cursor: default;
}
.docx-editor-mode-switcher__trigger--locked:hover {
  background: var(--de-toolbar-button-bg);
}

.docx-editor-mode-switcher__menu {
  min-width: 260px;
  background: #ffffff;
  border: 1px solid var(--de-border-raw);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
}

.docx-editor-mode-switcher__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--de-text);
}
.docx-editor-mode-switcher__option:hover {
  background: var(--de-toolbar-button-bg-hover);
}
.docx-editor-mode-switcher__option[data-active="true"] {
  background: var(--de-toolbar-button-bg-active);
}
.docx-editor-mode-switcher__option svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.docx-editor-mode-switcher__option-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  flex: 1;
  min-width: 0;
}
.docx-editor-mode-switcher__option-label {
  font-size: 13px;
  font-weight: 600;
}
.docx-editor-mode-switcher__option-desc {
  font-size: 12px;
  color: var(--de-text-muted);
}
.docx-editor-mode-switcher__check {
  flex-shrink: 0;
  color: var(--de-toolbar-button-fg-active);
  margin-top: 2px;
}

/* ---- Generic icon-select dropdown (Alignment / List type): collapses a
   set of mutually-exclusive icon buttons into one trigger that shows only
   the active option, matching Google Docs' compact toolbar. ------------- */
.docx-editor-icon-menu {
  display: inline-flex;
  position: relative;
}
.docx-editor-icon-menu__trigger {
  gap: 2px;
  padding: 0 4px 0 7px;
}
.docx-editor-icon-menu__caret {
  flex-shrink: 0;
  opacity: 0.6;
}
.docx-editor-icon-menu__menu {
  min-width: 170px;
  background: #ffffff;
  border: 1px solid var(--de-border-raw);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 4px;
}
.docx-editor-icon-menu__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: none;
  background: transparent;
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--de-text);
  font-size: 13px;
}
.docx-editor-icon-menu__option:hover {
  background: var(--de-toolbar-button-bg-hover);
}
.docx-editor-icon-menu__option[data-active="true"] {
  background: var(--de-toolbar-button-bg-active);
  color: var(--de-toolbar-button-fg-active);
}
.docx-editor-icon-menu__option svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.docx-editor-icon-menu__option-label {
  flex: 1;
}
.docx-editor-icon-menu__check {
  flex-shrink: 0;
  color: var(--de-toolbar-button-fg-active);
}

/* Select / dropdown inside toolbar — flat pill, border only on focus,
   matching the borderless look of the reference toolbar. */
.docx-editor-toolbar-select {
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--de-text);
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  outline: none;
  flex-shrink: 0;
}
.docx-editor-toolbar-select:hover {
  background: var(--de-toolbar-button-bg-hover);
}
.docx-editor-toolbar-select:focus {
  border-color: var(--de-accent);
  background: var(--de-surface);
}
.docx-editor-toolbar-select--narrow {
  width: 64px;
}
.docx-editor-toolbar-select--medium {
  width: 128px;
}

/* Color swatch button */
.docx-editor-color-button {
  position: relative;
}
.docx-editor-color-button__swatch {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  border-radius: 1px;
  background: var(--de-text);
}

/* ---- Custom dropdown (replaces native <select>) ------------------ */
/* Used in the toolbar for Style / Font / Size / LineHeight / TextCase */

.docx-editor-dropdown {
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}

/* Flat, borderless pill — matches the reference toolbar, where "Normal
   text" / "Arial" / etc. read as plain text + a caret until you interact
   with them, not boxed form controls. */
.docx-editor-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--de-text, #1f2328);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  outline: none;
  transition: background-color 80ms ease, border-color 80ms ease, box-shadow 80ms ease;
  white-space: nowrap;
}
.docx-editor-dropdown__trigger:hover {
  background: var(--de-toolbar-button-bg-hover, #f1f3f4);
}
.docx-editor-dropdown__trigger[data-open="true"] {
  background: #ffffff;
  border-color: var(--de-accent, #2563eb);
  box-shadow: 0 0 0 2px var(--de-focus-ring, rgba(37, 99, 235, 0.45));
}
.docx-editor-dropdown__trigger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.docx-editor-dropdown__trigger-label {
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}

.docx-editor-dropdown__trigger-caret {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: 0.6;
  transition: transform 120ms ease;
}
.docx-editor-dropdown__trigger[data-open="true"] .docx-editor-dropdown__trigger-caret {
  transform: rotate(180deg);
}

.docx-editor-dropdown__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: #ffffff;
  border: 1px solid var(--de-border-raw, #d0d7de);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.04);
  padding: 6px;
  z-index: 1000;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.docx-editor-dropdown__menu::-webkit-scrollbar { width: 8px; }
.docx-editor-dropdown__menu::-webkit-scrollbar-track { background: transparent; }
.docx-editor-dropdown__menu::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
  border: 2px solid #ffffff;
}

.docx-editor-dropdown__option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: none;
  background: transparent;
  color: var(--de-text, #1f2328);
  font-size: 13px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 60ms ease, color 60ms ease;
  white-space: nowrap;
  margin-bottom: 2px;
  line-height: 1.3;
}
.docx-editor-dropdown__option:last-child {
  margin-bottom: 0;
}
.docx-editor-dropdown__option:hover,
.docx-editor-dropdown__option[data-focused="true"] {
  background: var(--de-toolbar-button-bg-hover, #f1f5f9);
}
.docx-editor-dropdown__option[data-selected="true"] {
  background: var(--de-toolbar-button-bg-active, #dbeafe);
  color: var(--de-toolbar-button-fg-active, #2563eb);
  font-weight: 500;
}
.docx-editor-dropdown__option-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  opacity: 0;
}
.docx-editor-dropdown__option[data-selected="true"] .docx-editor-dropdown__option-check {
  opacity: 1;
}

.docx-editor-dropdown__option-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Width variants */
.docx-editor-dropdown--narrow .docx-editor-dropdown__trigger {
  min-width: 56px;
  padding: 0 8px;
}
.docx-editor-dropdown--narrow .docx-editor-dropdown__trigger-label {
  max-width: 36px;
}
.docx-editor-dropdown--medium .docx-editor-dropdown__trigger {
  min-width: 104px;
}
.docx-editor-dropdown--medium .docx-editor-dropdown__trigger-label {
  max-width: 78px;
}