/**
 * ICON PRIMITIVE
 * Based on Every Layout's Icon
 * Creates properly sized and spaced inline SVG icons
 *
 * Features:
 * - Icons sized to match uppercase letter height (0.75em)
 * - Uses cap-height unit when supported (1cap) for perfect alignment
 * - Scales with text using relative em units
 * - Supports logical margin spacing for LTR/RTL languages
 * - Baseline alignment by default
 * - Inline display mode (not block)
 *
 * Usage:
 * .icon - Basic icon (no spacing, uses word spacing)
 * .with-icon - Container with controlled margin spacing
 * .with-icon .icon - Icon with margin-inline-end spacing
 */

.icon {
  width: 0.75em;
  width: 1cap;
  height: 0.75em;
  height: 1cap;
  display: inline-block;
  vertical-align: baseline;
}

/* ========================================
   SPACING VARIANTS
 * For controlled icon-to-text spacing
 * ======================================== */

/* Container for controlled spacing - eliminates word spacing */
.with-icon {
  display: inline-flex;
  align-items: baseline;
}

/* Add margin spacing after icon */
.with-icon .icon {
  margin-inline-end: var(--icon-space, 0.5em);
}

/* No margin variant */
.icon[data-icon="no-margin"] {
  margin-inline-end: 0;
}

/* ========================================
   SIZE VARIANTS
 * Different icon sizes
 * ======================================== */

/* Match lowercase letter height (x-height) */
.icon[data-icon="lowercase"] {
  width: 1ex;
  height: 1ex;
}

/* Smaller icon */
.icon[data-icon="small"] {
  width: 0.5em;
  height: 0.5em;
}

/* Larger icon */
.icon[data-icon="large"] {
  width: 1em;
  height: 1em;
}

/* ========================================
   ALIGNMENT VARIANTS
 * Vertical alignment options
 * ======================================== */

/* Middle alignment (use with caution - not true middle) */
.icon[data-icon="middle"] {
  vertical-align: middle;
}

/* Text-top alignment */
.icon[data-icon="top"] {
  vertical-align: text-top;
}

/* Text-bottom alignment */
.icon[data-icon="bottom"] {
  vertical-align: text-bottom;
}

/* Custom offset from baseline */
.icon[data-icon="offset"] {
  vertical-align: -0.25em;
}