/* Helper classes for FluentUI System Icons.
   Mirrors the small subset of Font Awesome utility modifiers we actually used
   (only fa-spin in practice). */

/* Base sizing/alignment for FluentUI System Icons.
   The Resizable variant (single variable font, what we use) trades em-square
   fill for scalability — its glyphs occupy ~87% of the em-square instead of
   the ~100% the fixed-size variants achieve at their nominal size. Result:
   font-size: 16px renders a visible glyph of ~14px. Microsoft's M365 portal
   uses the fixed-size variants at font-size: 16px and gets a true 16px glyph;
   we compensate by setting font-size: 18px here (18 × 0.87 ≈ 16) so visible
   size matches M365 even though our font choice differs. Pixel-fixed rather
   than em-relative because icons should stay consistent regardless of
   surrounding text size. */
i[class^="icon-ic_fluent_"],
i[class*=" icon-ic_fluent_"] {
    display: inline-block;
    font-size: 18px;
    vertical-align: -0.37em;
}

.icon-spin {
    animation: cp-icon-spin 1.5s infinite linear;
    display: inline-block;
}

@keyframes cp-icon-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Brand SVGs are inlined via _BrandIcon partial; this keeps them sized in line
   with surrounding text and inheriting the current text color when the source
   SVG uses currentColor. */
.brand-icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}