.mriia-local-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    vertical-align: -0.125em;
    font-family: inherit;
    font-style: normal;
    speak: none;
}

.mriia-local-icon::before {
    content: none !important;
}

/* Tint content icons from the nearest surface; the sidebar keeps its own SVG colors. */
.mriia-local-icon {
    background-color: var(--mriia-icon-color, #0b61ff);
    background-image: none !important;
    -webkit-mask-image: var(--mriia-icon-src, none);
    mask-image: var(--mriia-icon-src, none);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sidebar .mriia-local-icon,
.experimental-sidebar .mriia-local-icon {
    background-color: transparent !important;
    background-image: var(--mriia-icon-src, none) !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

.nav-item .fa-users,
.nav-item .fa-headset {
    width: 20px !important;
    height: 20px !important;
    margin-right: 20px !important;
    flex: 0 0 auto;
    font-size: 18px !important;
}

.nav-item[onclick*="sub-extracurricular"] {
    align-items: center;
}

.sidebar .nav-item[onclick*="sub-extracurricular"] {
    transform: translateY(-2px);
}

.nav-item[onclick*="sub-extracurricular"] > .mriia-local-icon:first-child {
    transform: translateY(2px);
}

.nav-item[onclick*="sub-extracurricular"] > i.fa-users {
    font-size: 9.5px !important;
}

.nav-item[onclick*="sub-extracurricular"] .extracurricular-label {
    transform: translate(-2px, -2px);
}

.sidebar .nav-item > .nav-icon {
    filter: brightness(0) saturate(100%);
}

.mriia-icon-users {
    filter: brightness(0) saturate(100%);
}

.mriia-icon-headset {
    filter: brightness(0) saturate(100%);
}

.mriia-icon-chevron-down,
.mriia-icon-chevron-up,
.mriia-icon-chevron-left,
.mriia-icon-chevron-right,
.mriia-icon-angle-left,
.mriia-icon-angle-right {
    filter: brightness(0) saturate(100%);
}

.sidebar .nav-item > .mriia-icon-chevron-down,
.sidebar .nav-item > .mriia-icon-chevron-up,
.sidebar .nav-item > .mriia-icon-chevron-left,
.sidebar .nav-item > .mriia-icon-chevron-right {
    filter: brightness(0) saturate(100%);
}

.sidebar .nav-item > .mriia-local-icon {
    filter: brightness(0) saturate(100%);
}

.sidebar .nav-item.active > .nav-icon,
.sidebar .nav-item.active > .mriia-local-icon {
    filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%);
}

.sidebar .nav-item.expanded > .nav-icon,
.sidebar .nav-item.expanded > .mriia-local-icon {
    filter: brightness(0) saturate(100%) invert(39%) sepia(98%) saturate(1700%) hue-rotate(202deg) brightness(101%) contrast(101%) !important;
}

.sidebar .nav-item.expanded > .arrow {
    border-bottom-color: var(--primary-blue) !important;
}

/* Content icons use the surface color computed by local-icons.js. */
#schedule .mriia-local-icon,
#calendar .mriia-local-icon {
    filter: none !important;
}

/* Journal icons: rendered as a CSS mask so each action icon can be tinted to
   fit its background (blue on white, white on blue/green, bright pastel on
   pastel). The icon graphic is supplied by local-icons.js through the
   --mriia-icon-src variable. */
#journals .mriia-local-icon,
#learning-journals .mriia-local-icon,
#learning-subgroups .mriia-local-icon {
    filter: none !important;
    background-color: var(--mriia-icon-color, #0b61ff);
}

/* Deliberately invisible empty-state check. */
#journals .lesson-topic-check.is-empty .mriia-local-icon {
    background-color: transparent;
}

#class-admin-panel .mriia-icon-user-check {
    filter: none !important;
}

#class-admin-panel .mriia-icon-comment-dots {
    filter: none !important;
}

#class-admin-panel .mriia-icon-clipboard-check {
    filter: none !important;
}

#class-admin-panel .mriia-icon-person-walking-luggage {
    filter: none !important;
}

#class-admin-panel .mriia-icon-file-circle-check {
    filter: none !important;
}

[id*="students"] .mriia-icon-rotate,
[id*="students"] .mriia-icon-download,
[id*="students"] .mriia-icon-user,
[id*="students"] .mriia-icon-users {
    filter: none !important;
}

#stats-reports .reports-doc-icon .mriia-local-icon,
#stats-reports-legacy .reports-doc-icon .mriia-local-icon {
    filter: none !important;
}

.settings-tab .mriia-local-icon,
.nav-pill .mriia-local-icon {
    filter: none !important;
}

#tab-learning .big-card .title-icon-badge {
    background: transparent !important;
}

#tab-learning .big-card .title-icon-badge .mriia-local-icon {
    filter: none !important;
}

.mriia-local-icon.fa-spin {
    animation: mriia-local-icon-spin 1s linear infinite;
}

@keyframes mriia-local-icon-spin {
    to { transform: rotate(360deg); }
}
