/* ==============================================================================
   CONTROLS — interactive input chrome
   ==============================================================================
   The search input, toggle icon, in-input count badge, dropdown action bar,
   and individual action buttons. Floating panels (dropdown, hint, tooltip,
   popover) live in floating.css; state modifiers (.ms--disabled, etc.) live
   in states.css.
*/

/* ==============================================================================
   INPUT
   ============================================================================== */

/* The wrapper is the FIELD SHELL: it carries the border, background, radius, and
   focus ring. The <input>, the [N] counter, the ✕ clear, and the ▾ chevron are its
   flex children (in that DOM order), laid out in a row with a gap. The input is
   `flex: 1; min-width: 0`, so it only occupies the space left of the trailing
   decorations — long text clips/scrolls inside the input's own box and can never
   slide under the icons. RTL falls out of the flex direction for free. */
.ms__input-wrapper {
  box-sizing: border-box;
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--ms-input-gap);
  height: var(--ms-input-height);
  padding-inline: var(--ms-input-padding-h);
  background: var(--ms-input-bg);
  color: var(--ms-input-color);
  border: var(--ms-input-border);
  border-radius: var(--ms-input-border-radius);
  cursor: pointer;
  transition: border var(--ms-transition-fast) var(--ms-easing-snappy);
}

.ms__input-wrapper:hover:not(:focus-within) {
  border: var(--ms-input-border-hover);
}

.ms__input-wrapper:focus-within {
  border: var(--ms-input-border-focus);
}

.ms__input {
  flex: 1 1 auto;
  min-width: 0; /* let the input shrink so text clips instead of overflowing the row */
  box-sizing: border-box;
  font-family: inherit; /* Form elements don't inherit font by default */
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  font-size: var(--ms-input-font-size);
  color: var(--ms-input-color);
  cursor: pointer;
  outline: none;
}

.ms__input::placeholder {
  color: var(--ms-input-placeholder-color);
  opacity: 0; /* Initially hidden until component is ready */
  transition: opacity var(--ms-transition-fast) var(--ms-easing-snappy);
}

/* Show placeholder only after component is fully initialized */
:host([data-ready]) .ms__input::placeholder {
  opacity: var(--ms-placeholder-opacity);
}

/* ==============================================================================
   INPUT SIZE VARIANTS — currently unused (commented out)
   ==============================================================================
   Preset size tiers for the input. Nothing toggles these .ms__input--* classes
   (no `size` attribute is wired up), so they're inert. Commented out for now to
   avoid dead theming surface — but kept, not deleted, because a future `size`
   attribute could activate them as a named-preset API. We just haven't hit a case
   that needs it yet. Until then, size via --ms-rem (global scale) or the individual
   --ms-input-* vars (targeted overrides). Paired with the --ms-input-size-* var
   chain in variables.css (also commented out).

.ms__input.ms__input--xs {
  font-size: var(--ms-input-size-xs-font);
  padding: var(--ms-input-size-xs-padding-v) var(--ms-input-size-xs-padding-h);
  padding-right: calc(var(--ms-input-size-xs-padding-h) * 2.5);
  height: var(--ms-input-size-xs-height);
}

.ms__input.ms__input--sm {
  font-size: var(--ms-input-size-sm-font);
  padding: var(--ms-input-size-sm-padding-v) var(--ms-input-size-sm-padding-h);
  padding-right: calc(var(--ms-input-size-sm-padding-h) * 2.5);
  height: var(--ms-input-size-sm-height);
}

.ms__input.ms__input--lg {
  font-size: var(--ms-input-size-lg-font);
  padding: var(--ms-input-size-lg-padding-v) var(--ms-input-size-lg-padding-h);
  padding-right: calc(var(--ms-input-size-lg-padding-h) * 2.5);
  height: var(--ms-input-size-lg-height);
}

.ms__input.ms__input--xl {
  font-size: var(--ms-input-size-xl-font);
  padding: var(--ms-input-size-xl-padding-v) var(--ms-input-size-xl-padding-h);
  padding-right: calc(var(--ms-input-size-xl-padding-h) * 2.5);
  height: var(--ms-input-size-xl-height);
}
*/

/* ==============================================================================
   TOGGLE ICON
   ============================================================================== */

.ms__toggle {
  flex: 0 0 auto;
  display: block;
  width: var(--ms-toggle-icon-size);
  height: var(--ms-toggle-icon-size);
  color: var(--ms-toggle-icon-color);
  cursor: pointer; /* real box now (not an overlay the click falls through) — opens on click */
}

/* Chevron as a mask icon (consistent with the ✕ / count-clear / badge-remove glyphs),
   not a text character. --ms-icon-chevron points RIGHT (wired to --base-icon-chevron, a
   Lucide angle that fills its viewBox for full optical size); the closed state rotates it
   90° to point down, opening rotates it -90° to point up (a 180° sweep).

   The two rotations are themeable via --ms-toggle-rotate-closed / --ms-toggle-rotate-open:
   the defaults (90deg / -90deg) orient the directional right-pointing base chevron. A theme
   supplying a PRE-ORIENTED glyph (already pointing down) can opt out of the orientation —
   set both to `0deg` for a static glyph, or `0deg` / `180deg` to flip it up on open. */
.ms__toggle::before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: var(--ms-icon-chevron) center / contain no-repeat;
          mask: var(--ms-icon-chevron) center / contain no-repeat;
  transform: rotate(var(--ms-toggle-rotate-closed, 90deg));
  transition: transform var(--ms-transition-fast) var(--ms-easing-snappy);
}

.ms--open .ms__toggle {
  color: var(--ms-toggle-icon-color-open);
}

.ms--open .ms__toggle::before {
  transform: rotate(var(--ms-toggle-rotate-open, -90deg));
}

/* ==============================================================================
   IN-INPUT COUNT BADGE
   ============================================================================== */

.ms__counter {
  flex: 0 0 auto;
  padding: var(--ms-counter-padding);
  background: var(--ms-counter-badge-bg);
  color: var(--ms-counter-badge-color);
  font-size: var(--ms-counter-font-size);
  font-weight: var(--ms-counter-font-weight);
  border-radius: var(--ms-counter-border-radius);
  cursor: pointer;
  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
}

.ms__counter:hover {
  background: var(--ms-counter-badge-bg-hover);
  transform: scale(var(--ms-transform-scale-hover));
}

/* ==============================================================================
   INPUT CLEAR (✕)
   ==============================================================================
   Opt-in via `show-clear`. A small mask-icon ✕ that sits in the trailing flex row,
   just before the chevron. JS (updateClearButton) toggles its `display` by
   selection/enabled state; the flex layout handles spacing (no inset math). */
.ms__input-clear {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--ms-input-clear-size);
  height: var(--ms-input-clear-size);
  padding: 0;
  color: var(--ms-input-clear-color);
  background: transparent;
  border: none;
  border-radius: var(--ms-input-clear-border-radius);
  cursor: pointer;
  transition: background var(--ms-transition-fast) var(--ms-easing-snappy);
}

.ms__input-clear:hover {
  background: var(--ms-input-clear-bg-hover);
}

.ms__input-clear::before {
  content: "";
  display: block;
  width: var(--ms-input-clear-icon-size);
  height: var(--ms-input-clear-icon-size);
  background-color: currentColor;
  -webkit-mask: var(--ms-icon-clear) center / contain no-repeat;
          mask: var(--ms-icon-clear) center / contain no-repeat;
}

/* ==============================================================================
   DROPDOWN ACTION BAR
   ============================================================================== */

/* Actions block: a vertical stack of one or more button rows. */
.ms__actions {
  display: flex;
  flex-direction: column;
  gap: var(--ms-actions-gap);
  padding: var(--ms-actions-padding);
}

/* Top position: separator below the actions (above the options list). */
.ms__actions--top {
  border-bottom: var(--ms-actions-border-bottom);
}

/* Bottom position: column-reverse so row 1 lands at the bottom (outer) edge; separator above. */
.ms__actions--bottom {
  flex-direction: column-reverse;
  border-top: var(--ms-actions-border-bottom);
}

/* One horizontal line of buttons within the stack. */
.ms__actions-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--ms-actions-gap);
}

.ms__actions--wrap .ms__actions-row {
  flex-wrap: wrap;
}

/* Sticky pins the block to the matching edge of the scrolling dropdown. */
.ms__actions--sticky {
  position: sticky;
  z-index: var(--ms-z-index-sticky);
  background: var(--ms-actions-bg);
}

.ms__actions--sticky.ms__actions--top {
  top: 0;
}

.ms__actions--sticky.ms__actions--bottom {
  bottom: 0;
}

/* Button alignment within a row. `stretch` (default) fills the row; the rest size to content. */
.ms__actions--align-stretch .ms__action-btn {
  flex: 1;
}

.ms__actions--align-left .ms__actions-row {
  justify-content: flex-start;
}

.ms__actions--align-right .ms__actions-row {
  justify-content: flex-end;
}

.ms__actions--align-center .ms__actions-row {
  justify-content: center;
}

.ms__actions--align-space-between .ms__actions-row {
  justify-content: space-between;
}

.ms__action-btn {
  font-family: inherit; /* Form elements don't inherit font by default */
  padding: var(--ms-action-btn-padding);
  font-size: var(--ms-action-btn-font-size);
  border: var(--ms-action-btn-border);
  border-radius: var(--ms-action-btn-border-radius);
  background: var(--ms-action-button-bg);
  color: var(--ms-action-button-color);
  cursor: pointer;
  transition: all var(--ms-transition-fast) var(--ms-easing-snappy);
  /* Tap-highlight flash is suppressed once for the whole component on :host (base.css). */
}

/* Hover gated to real pointing devices — on touch `:hover` sticks after a tap and
   would leave the button looking pressed (see the option rows in options.css). */
@media (hover: hover) {
  .ms__action-btn:hover {
    background: var(--ms-action-button-bg-hover);
    border-color: var(--ms-action-button-border-color-hover);
  }
}

.ms__action-btn:active {
  transform: scale(var(--ms-transform-scale-active));
}

.ms__action-btn:disabled,
.ms__action-btn[disabled] {
  opacity: var(--ms-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}