/**
 * TMN icon set — Font Awesome–style SVG icons.
 *
 * Usage (same pattern as FA):
 *   <i class="tmn-font tmn-font-drop" aria-hidden="true"></i>
 *   <i class="tmn-font tmn-font-drop-alt" aria-hidden="true"></i>
 *
 * Color inherits via currentColor (parent text color / CSS color).
 * Size follows font-size (1em × 1em), like FA.
 *
 * Add a new icon:
 * 1. Drop an SVG into /public/front-end-assets/icons/tmn-{name}.svg
 *    (black shapes on transparent; works as a CSS mask)
 * 2. Add .tmn-font-{name} below with mask-image pointing at that file
 */

.tmn-font {
    display: inline-block;
    width: 1em;
    height: 1em;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Outline drop + play */
.tmn-font-drop {
    -webkit-mask-image: url("../icons/tmn-drop.svg");
    mask-image: url("../icons/tmn-drop.svg");
}

/* Solid drop + play (alt) */
.tmn-font-drop-alt {
    -webkit-mask-image: url("../icons/tmn-drop-alt.svg");
    mask-image: url("../icons/tmn-drop-alt.svg");
}

/* Align with Font Awesome icon slots in menus */
.quickmenu-lists .tmn-font,
.main-top-header-center-menubar .tmn-font {
    margin-right: 0.15em;
}