/* ==============================================================================
   BASE STYLES
   ==============================================================================
   Foundation styles: FOUC prevention and layout containers
*/

/* ==============================================================================
   FOUC PREVENTION
   ==============================================================================
   Prevent Flash of Unstyled Content by hiding undefined custom elements
   Keep element visible to prevent layout shift, but hide any text content
*/
web-multiselect:not(:defined) {
  display: block;
  min-height: calc(3.5 * var(--ms-rem));  /* 35px (md size) */
  color: transparent !important;
  background: transparent;
}

/* Deferred render gate: the author set `defer` and hasn't released it yet
   (`el.ready()` / removing the attribute). While held the element builds no
   shadow content, so there is nothing to hide — just reserve space so releasing
   the gate doesn't shift layout, matching the :not(:defined) window above. The
   element drops `is-ready` in on its first build, which lifts this rule. */
:host([defer]:not([is-ready])) {
  display: block;
  min-height: calc(3.5 * var(--ms-rem));
}

/* Suppress the mobile tap-highlight flash (the light-blue/grey box UA browsers paint
   over a tapped element on touch) for the whole component in ONE place. This property
   is inherited, so declaring it on :host cascades to every surface in the shadow tree
   — option rows, action buttons, the toggle — and any tappable surface added later
   opts in for free. Our own hover/selected/active states are the feedback; the UA
   overlay just reads as an accidental highlight, most visibly on taps that don't
   change the row (e.g. the info affordance). The transient message keeps its own
   declaration (floating.css) because it can be reparented to document.body, outside
   this subtree, where :host inheritance doesn't reach. */
:host {
  -webkit-tap-highlight-color: transparent;
}

/* ==============================================================================
   LAYOUT CONTAINERS
   ==============================================================================
*/

/* Wrapper (contains multiselect + badges) */
.ms__wrapper {
  display: flex;
  flex-direction: column; /* Default: badges above/below input */
  align-items: stretch;
}

/* Inline layout for left/right positioning */
.ms__wrapper--inline {
  flex-direction: row;
  align-items: var(--ms-inline-align, center);
}

/* Main container */
/* Note: font-family is set on :host in variables.css so all shadow DOM content inherits */
.ms {
  position: relative;
  width: 100%;
}