/**
 * Waifly icon set — see scripts/icons.js.
 *
 * Icons are sized in `em` and painted with `currentColor`, so they pick up the
 * font-size and color of their container. Existing rules that sized an emoji
 * with `font-size` keep working untouched.
 */

.wi {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    flex: none;
}

/* Inside flex rows (buttons, badges, tabs) the baseline nudge is unwanted. */
:is(button, .tab, .badge, .btn) > .wi {
    vertical-align: 0;
}

/* Placeholder still awaiting hydration — reserve the box, show nothing. */
.wi[data-icon] {
    visibility: hidden;
}

/**
 * Bullet/checkmark pseudo-elements. Applied via mask so the glyph takes its
 * color from the rule's `background-color`.
 */
.wi-mask {
    display: inline-block;
    width: 1em;
    height: 1em;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}