/*
 * Icons (DESIGN.md 3.2): Material Symbols Rounded at weight 300, self-hosted as a subset of the glyphs the
 * product uses (fonts/material-symbols-rounded.icons.txt lists them and how to regenerate the file;
 * IconInventoryTests fails when a name used anywhere is missing from it, since a missing glyph renders
 * as its name). No request leaves for Google Fonts.
 *
 * An icon is <span class="icon" aria-hidden="true">name</span>. It is outlined at rest; it fills when it
 * marks the current or selected item — the navigation's current destination, the selected tab or segment —
 * or when it carries .icon-filled. Optical size follows the font size (font-optical-sizing), within the
 * subset's 20–48 range.
 */

@font-face {
    font-family: "Material Symbols Rounded";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/MaterialSymbolsRounded.woff2) format("woff2");
}

.icon {
    --icon-fill: 0;
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    font-family: var(--bc-icon-font-family);
    font-size: 20px;
    font-style: normal;
    font-weight: 300;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    vertical-align: middle;
    font-feature-settings: "liga" 1;
    font-variant-ligatures: common-ligatures;
    font-optical-sizing: auto;
    font-variation-settings: "FILL" var(--icon-fill), "GRAD" 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    user-select: none;
}

/* Filled: selected states, and the few places that ask for it. */
.icon-filled,
[aria-current="page"] .icon,
[aria-selected="true"] .icon,
[aria-pressed="true"] .icon {
    --icon-fill: 1;
}

/* Sizes */
.icon-xs { font-size: 16px; }
.icon-sm { font-size: 18px; }
.icon-md { font-size: 24px; }
.icon-lg { font-size: 32px; }
.icon-xl { font-size: 40px; }
.icon-2xl { font-size: 48px; }

/* Rotation for loading spinners */
.icon-spin {
    animation: icon-spin 1.2s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .icon-spin {
        animation: none;
    }
}