/* =========================================================
   P2P — SVG icons (p2p_icon())
   ========================================================= */

/*
 * Icons are 1em tall, so they scale with the surrounding font size.
 * The width follows the icon's own viewBox proportions.
 */
.p2p-icon {
    display: inline-block;
    height: 1em;
    width: auto;
    flex-shrink: 0;
    overflow: visible;
    vertical-align: -0.125em;
}

/*
 * Single-colour icons take the text colour. Icons that set their own
 * fill on the root <svg> (e.g. fill="none" for outline/stroke icon sets)
 * keep it.
 */
.p2p-icon:not([fill]) {
    fill: currentColor;
}


/* =========================================================
   P2P — Category icons
   ========================================================= */

/*
 * One variable controls the colour of every category icon, both the
 * SVG icons (p2p_get_category_icon()) and the PNG mask fallback.
 * Override it per context, e.g.:
 *
 *     .p2p-hero { --p2p-category-icon-color: var(--p2p-green); }
 */
:root {
    --p2p-category-icon-color: #fff;
}

.p2p-category-icon {
    color: var(--p2p-category-icon-color);
}

/* Fallback: category thumbnail (PNG) masked to a single colour. */
.p2p-white-icon--masked {
    display: inline-block;
    flex-shrink: 0;

    min-width: 2rem;
    min-height: 2rem;

    background-color: var(--p2p-category-icon-color);

    -webkit-mask-image: var(--p2p-icon-mask);
    mask-image: var(--p2p-icon-mask);

    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;

    -webkit-mask-position: center;
    mask-position: center;

    -webkit-mask-size: contain;
    mask-size: contain;
}