/**
 * Frontend menu icon styles.
 *
 * All selectors are scoped to the plugin's own `.umip-` classes so no other
 * icons or menu elements are affected. The embedded CSS custom properties
 * (--umip-icon-size / --umip-icon-spacing) are set inline by the Renderer
 * from the Settings page, and may be overridden by themes.
 *
 * @package Universal_Menu_Icon_Picker
 * @since   1.0.0
 */

/* Base icon element rendered inside the nav link. */
.umip-menu-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: var(--umip-icon-size, 16px);
  line-height: 1;
  vertical-align: middle;
  text-align: center;
  flex: 0 0 auto;
}

/* Position: before (default) — title follows the icon. */
.umip-menu-icon.umip-icon-before {
  margin-right: var(--umip-icon-spacing, 8px);
}

/* Position: after — title precedes the icon. */
.umip-menu-icon.umip-icon-after {
  margin-left: var(--umip-icon-spacing, 8px);
}

/* Keep the anchor a flex container so the icon and label align neatly. */
.menu-item.menu-item-has-icon > a {
  display: inline-flex;
  align-items: center;
}