/* The house rich-text toolbar (fix-200) — templates/shared/_rich_text_toolbar.html, every Trix editor's toolbar (the
   email box, contact notes, the email signature). Its buttons are house .icon-btn--sm + .state-layer with Material
   Symbols and its link input the house .filled-field, so this sheet only lays them out: the groups wrap rather than
   scroll, a hairline segments them, a pressed button takes the selected tone (the segmented control's), and the link
   dialog is a floating card over the editor. A host places the toolbar (the email box draws it as a tinted band).
   Trix's own toolbar rules (trix.css) target its stock classes, which this markup doesn't use. Prefix: .rt-toolbar */

.rt-toolbar { display: block; margin-bottom: var(--space-2, 8px); }

.rt-toolbar__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1, 4px) var(--space-2, 8px);
}
.rt-toolbar__group { display: flex; align-items: center; }
.rt-toolbar__group + .rt-toolbar__group {
  padding-left: var(--space-2, 8px);
  border-left: 1px solid var(--md-sys-color-outline-variant);
}
.rt-toolbar__spacer { flex: 1 1 auto; } /* the history tools sit at the far end, with no hairline before them */

.rt-toolbar__btn.trix-active {
  background: var(--md-sys-color-secondary-container);
  color: var(--md-sys-color-on-secondary-container);
}

/* The link dialog: Trix shows it ([data-trix-active]) and hides it; it floats over the top of the editor. */
.rt-toolbar__dialogs { position: relative; }
.rt-toolbar__link {
  position: absolute;
  top: var(--space-1, 4px);
  left: 0;
  right: 0;
  z-index: 1; /* above the editor it covers */
  display: flex;
  align-items: center;
  gap: var(--space-2, 8px);
  padding: var(--space-2, 8px);
  background: var(--md-sys-color-surface-container-lowest);
  border-radius: var(--r-sm);
  box-shadow: var(--elev-2);
}
.rt-toolbar__url { flex: 1 1 auto; }