/**
 * Frontend label icons for WS Form fields.
 *
 * The icon is painted as a CSS mask so its colour comes from `background-color`
 * rather than the SVG itself. Sizing and colour mirror the lead form design kit:
 * a 15px icon in Neutral 500. Spacing is left to the label's own gap.
 *
 * The `--eh-wsfe-icon` value per icon is added inline by FieldIcons, because the
 * icon catalogue is filterable and its data URIs are generated at runtime.
 */

/*
 * `.wsf-form label.wsf-label` (WS Form's own stylesheet) sets `display: block`
 * with specificity (0,2,1) — one class higher than a bare `.wsf-label`, because
 * it also qualifies the `label` tag. That beats a plain
 * `.eh-wsfe-label-icon .wsf-label` rule, silently dropping back to `display:
 * inline`, under which `width`/`height` on the icon's `::before` have no effect
 * per spec — the icon collapses to nothing. Only shows up on fields using
 * WS Form's "Label Position: Inside", the one label-position mode with its own
 * competing rule; every other mode has nothing to lose to. Scoping to
 * `.wsf-form` matches WS Form's own qualifier and wins outright — except on
 * focus/filled, where WS Form's own floating-label rule (targeting
 * `input.wsf-field[placeholder]:focus + label` /
 * `:not(:placeholder-shown) + label`, part of its own "Label Position:
 * Inside" floating mechanic) re-asserts `display: block` at specificity
 * (0,6,2) — far above this rule's (0,3,0), so `!important` is what actually
 * wins there, not specificity.
 */
.wsf-form .eh-wsfe-label-icon .wsf-label {
  display: flex !important;
  align-items: center;
}

.eh-wsfe-label-icon .wsf-label::before {
  content: '';
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background-color: var(--neutral-500, var(--wp--preset--color--neutral-500, #71717a));
  -webkit-mask: var(--eh-wsfe-icon) center / contain no-repeat;
  mask: var(--eh-wsfe-icon) center / contain no-repeat;
}