/* Mobile glyphs inherit the control's theme color. Original PNGs stay intact
   for desktop and as the no-JavaScript fallback. */
.vms-mobile-icon {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    flex: 0 0 auto;
    vertical-align: middle;
    color: inherit;
    fill: none;
    stroke: currentColor;
    filter: none;
    pointer-events: none;
}

.vms-mobile-icon--replacement,
.vms-mobile-icon--addition {
    display: none;
}

@media (max-width: 760px), (max-width: 1180px) and (orientation: portrait) {
    img[data-vms-mobile-icon-ready="1"] {
        display: none !important;
    }

    .vms-mobile-icon--replacement,
    .vms-mobile-icon--addition {
        display: inline-block;
    }

    .vms-mobile-icon--card {
        width: 1.75rem;
        height: 1.75rem;
    }

    .vms-mobile-icon--kpi {
        width: 1.5rem;
        height: 1.5rem;
    }

    h1 > .vms-mobile-icon,
    .shore-section-title > .vms-mobile-icon {
        width: 1.75rem;
        height: 1.75rem;
    }

    .vms-mobile-icon-label > .vms-mobile-icon--addition {
        margin-inline-end: 0.4rem;
    }

    .mobile-nav-link > .vms-mobile-icon,
    .mobile-nav-home-link > .vms-mobile-icon {
        width: 1.5rem;
        height: 1.5rem;
    }

    .ship-visual-action > .vms-mobile-icon {
        width: 1.65rem;
        height: 1.65rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vms-mobile-icon {
        animation: none !important;
        transition: none !important;
    }
}