/* ---- SelectionFormatBar: floating format bar above a text selection --
   Position (top/left) is set inline via JS (see mobile/SelectionFormatBar.
   tsx, same `coordsAtPos` technique EditorContextMenuLayer uses); this
   partial only owns the bar's own look — background, shadow, layout of
   its buttons. Scoped under `.docx-editor-react[data-de-layout="mobile"]`
   like every other mobile-only rule. */

.docx-editor-react[data-de-layout="mobile"] .docx-editor-selection-format-bar {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px 6px;
  background: var(--de-surface);
  border-radius: 10px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--de-toolbar-border);
  z-index: 9500;
}

.docx-editor-react[data-de-layout="mobile"] .docx-editor-selection-format-bar .docx-editor-toolbar-button {
  width: var(--de-mobile-tap);
  height: var(--de-mobile-tap);
  min-width: var(--de-mobile-tap);
}