/*
 * The old site's own two icons (IcoMoon, css/chain/icomoon.style.css and fonts/icomoon of the Web Forms project): the Vues mark and the
 * Vuespots pin, which the Remix icon set has no equal for. Class names are the old ones: <i class="icm-icon-vues">.
 *
 * Drawn as masks of the glyphs' outlines (img/icons/icm-icon-*.svg, cut from the font, each viewBox the outline's own bounds) filled with
 * the text colour, not as characters of the font. A font glyph sits where the font's own ascent and descent put it: the Vues mark is drawn
 * in the lower half of its em box, and how far below the label it came out depended on the browser's reading of those metrics (about
 * 3px low in some). A mask is centred in its 1em box by construction, so it is centred on the label like every other icon, whatever the
 * browser, and nothing has to load before it shows. The old rule's margin-right of -3px is not carried over either.
 *
 * Used by the sidebar's Vues entries (Layouts/_public-sidebar, Layouts/_dashboard-sidebar); the Vuespots one is ready for use.
 */
.icm-icon-vues,
.icm-icon-vuespots {
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* mask-size is each outline's width in em (its width in font units / 1024), so it is drawn at the size the font drew it */
.icm-icon-vues {
    -webkit-mask-image: url('../img/icons/icm-icon-vues.svg');
    mask-image: url('../img/icons/icm-icon-vues.svg');
    -webkit-mask-size: 0.968em auto;
    mask-size: 0.968em auto;
}
.icm-icon-vuespots {
    -webkit-mask-image: url('../img/icons/icm-icon-vuespots.svg');
    mask-image: url('../img/icons/icm-icon-vuespots.svg');
    -webkit-mask-size: 0.709em auto;
    mask-size: 0.709em auto;
}