/* components/toolbar: ToolbarButton and ToolbarSearch (ui/toolbar.js), on the design-system tokens.
   Values from DS components/core/ToolbarButton.jsx and ToolbarSearch.jsx; the few literals are the component's
   own (noted where they appear). */

/* ---- ToolbarButton: the pill is the span; the main button and the clear x sit inside it ---- */
.ae-tb {
  display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0;
  height: var(--control-h-sm); border: var(--border-width-hairline) solid var(--border-default);
  border-radius: var(--radius-control); background: var(--surface-card); color: var(--text-body);
  font: var(--type-body-sm); white-space: nowrap; cursor: default; transition: var(--transition-control);
}
.ae-tb:hover, .ae-tb.is-active { border-color: var(--border-strong); background: var(--surface-hover); }
.ae-tb.is-active { color: var(--text-strong); }
.ae-tb--soft, .ae-tb--soft:hover { border-color: var(--toolbar-soft-border); color: var(--toolbar-soft-fg); }
.ae-tb--soft { background: var(--toolbar-soft-bg); }
.ae-tb--soft:hover { background: var(--toolbar-soft-hover-bg); }
/* focus: the pill takes the brand glow for its main button; the clear x keeps its own outline */
.ae-tb:has(.ae-tb__main:focus-visible) { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
.ae-tb.is-disabled { opacity: 0.5; cursor: not-allowed; }
.ae-tb.is-disabled:hover { border-color: var(--border-default); background: var(--surface-card); }
.ae-tb--soft.is-disabled:hover { border-color: var(--toolbar-soft-border); background: var(--toolbar-soft-bg); }

.ae-tb__main {
  display: inline-flex; align-items: center; gap: var(--s-1); height: 100%;
  padding: 0 var(--s-2); border: none; border-radius: inherit; background: transparent;
  color: inherit; font: inherit; cursor: pointer;
}
.ae-tb--clearable .ae-tb__main { padding-inline-end: var(--s-1); }
.ae-tb--icon-only .ae-tb__main { justify-content: center; width: var(--control-h-sm); padding: 0; }
.ae-tb__main:disabled { cursor: not-allowed; }
.ae-tb__main:focus-visible { outline: none; }
.ae-tb__clear:focus-visible { outline-offset: -2px; }
.ae-tb__icon { display: inline-flex; color: var(--text-subtle); }
.ae-tb.is-active .ae-tb__icon { color: var(--text-brand); }
.ae-tb--soft .ae-tb__icon { color: inherit; }
.ae-tb__icon.is-busy .icon { animation: ae-spin 900ms linear infinite; /* DS Spinner ring speed */ }
.ae-tb__caret { display: inline-flex; color: inherit; }
.ae-tb__overflow {
  padding-inline: 5px; border-radius: var(--radius-sm); /* DS ToolbarButton "+N" chip */
  background: var(--toolbar-count-bg); color: var(--toolbar-count-fg);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: 18px;
}
.ae-tb__count {
  min-width: 16px; padding-inline: 4px; border-radius: var(--radius-pill); /* DS ToolbarButton count badge */
  background: var(--surface-brand); color: var(--text-on-brand);
  font-size: var(--text-2xs); font-weight: var(--weight-medium); line-height: 16px; text-align: center;
}
.ae-tb__clear {
  display: inline-flex; align-items: center; height: 100%; padding: 0 var(--s-2) 0 0;
  border: none; border-radius: inherit; background: transparent; color: inherit; cursor: pointer;
}

/* ---- ToolbarSearch ---- */
.ae-tsearch {
  display: inline-flex; align-items: center; gap: var(--s-1); flex-shrink: 0;
  width: var(--ae-tsearch-w, 220px); height: var(--control-h-sm); padding-inline: var(--s-2);
  border: 1px solid var(--border-default); border-radius: var(--radius-control); background: var(--surface-card);
  transition: var(--transition-control);
}
.ae-tsearch:hover { border-color: var(--border-strong); }
.ae-tsearch:focus-within { border-color: var(--border-focus); box-shadow: var(--focus-ring); }
/* inside a form canvas the search is one more field: the canvas's neutral ring, like its inputs (forms.css; DS readme,
   States), so the one orange object on the form stays its primary button */
.ae-form-canvas .ae-tsearch:focus-within { border-color: var(--form-canvas-focus-border); box-shadow: var(--form-canvas-focus-ring); }
.ae-tsearch__glyph { display: inline-flex; flex-shrink: 0; color: var(--text-subtle); }
.ae-tsearch__input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; border: none; outline: none; background: transparent;
  font: var(--type-body-sm); color: var(--text-strong); appearance: none;
}
.ae-tsearch__input:focus-visible { outline: none; }
.ae-tsearch__input::placeholder { color: var(--text-subtle); }
.ae-tsearch__input::-webkit-search-cancel-button, .ae-tsearch__input::-webkit-search-decoration { appearance: none; }
.ae-tsearch__clear {
  display: inline-flex; padding: 2px; /* DS ToolbarSearch */ border: none; border-radius: var(--radius-pill);
  background: transparent; color: var(--text-subtle); cursor: pointer;
}
.ae-tsearch__clear:hover { color: var(--text-strong); }
[data-layout="mobile"] .ae-tsearch { width: 100%; }