/**
 * Inline SVG icon base styles.
 *
 * Replaces the Material Symbols icon font classes on the frontend.
 * Icons scale with the parent's font-size via em units.
 */

/* ── Base ─────────────────────────────────────────────────────── */
.rq-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
    flex-shrink: 0;
    line-height: 1;
    overflow: hidden;
}

/* ── Size modifiers ───────────────────────────────────────────── */
.rq-icon--sm  { width: 0.875em; height: 0.875em; }
.rq-icon--lg  { width: 1.25em;  height: 1.25em;  }
.rq-icon--xl  { width: 1.5em;   height: 1.5em;   }
.rq-icon--2xl { width: 2em;     height: 2em;      }
.rq-icon--3xl { width: 3em;     height: 3em;      }

/* ── Icon wrapper helper (migrated from material-symbols.css) ── */
.icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}