/*  Styles used in FW 

    icons designed to follow Material Design guidelines: 
    https://material.io/design/iconography/system-icons.html#design-principles 
    https://developers.google.com/fonts/docs/material_symbols

    https://fonts.google.com/icons
*/

/* For aligning the text with the icon. Ex: <p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p> */
.inline-icon {
    vertical-align: text-top;
}

/*MATERIAL ICON SIZE:
Remove inline-icon class (because our local css has a aont-size of 18px !important, and use span with whatever class.
<i class="material-symbols-outlined two-em center-me-vert text-danger">report</i>*/
i.two-em {
    font-size: 2em !important;
   
}

i.one-point-five-em {
    font-size: 1.5em !important;
}

i.one-point-two-five-em {
    font-size: 1.25em !important;
}

i.center-me-vert {
    vertical-align: middle !important;
}
/*ALSO: IN F12 DEBUGGER, MAKE SURE YOU GO TO Network TAB, TICK THE DISABLE CACHE BOX OR CTRL F5 HARD RELOADS ETC WILL NOT PICK UP CHANGES!!*/



/* Recommended icon sizes */
span.size-20 {
    font-size: 20px !important;
    font-variation-settings: 'OPSZ' 20;
}

span.size-24 {
    font-size: 24px !important;
    font-variation-settings: 'OPSZ' 24;
}

span.size-40 {
    font-size: 40px !important;
    font-variation-settings: 'OPSZ' 40;
}

span.size-48 {
    font-size: 48px !important;
    font-variation-settings: 'OPSZ' 48;
}

/* Rules for using icons as black on a light background. */
.dark {
    background: black;
    color: rgba(255, 255, 255, 1);
    font-variation-settings: 'GRAD' -25;
}

.dark-inactive {
    background: black;
    color: rgba(255, 255, 255, 0.3);
    font-variation-settings: 'GRAD' -25;
}

/* https://developers.google.com/fonts/docs/material_symbols */
.pulse {
    animation: pulse 3s infinite;
}

@keyframes pulse {
    0% {
        font-variation-settings: 'wght' 100;
    }

    50% {
        font-variation-settings: 'wght' 700;
    }

    100% {
        font-variation-settings: 'wght' 100;
    }
}