/*
 * Skygrip monochrome icons via CSS mask, using the real SVG files in ./icons/
 * (imported 1:1). Enqueued directly by Woo\Core\Assets (not through esbuild), so
 * the url() paths stay relative to this file. Coloured icons (verified, payments)
 * are <img> via Woo\Core\Support\Icon, not here.
 *
 * Tokens (--woo-star-*, --woo-gold) come from the store bundle's :root.
 */

/* Star rating mask (skygrip star.svg). Driven by inline --rating (0..5). */
.stars {
    --woo-star-max: 5;
    position: relative;
    display: inline-block;
    width: calc(var(--woo-star-size) * var(--woo-star-max));
    height: var(--woo-star-size);
    background: var(--woo-star-empty);
    -webkit-mask: url('icons/star.svg') left center / var(--woo-star-size) var(--woo-star-size) repeat-x;
    mask: url('icons/star.svg') left center / var(--woo-star-size) var(--woo-star-size) repeat-x;
    vertical-align: middle;
}

.stars::after {
    content: "";
    position: absolute;
    inset: 0;
    width: calc(var(--woo-star-size) * var(--rating, 0));
    background: var(--woo-star-fill);
    -webkit-mask: inherit;
    mask: inherit;
}

/* Monochrome mask icons (skygrip). Tinted gold (reserved for trust/ratings). */
.t-ico,
.g-ico {
    display: inline-block;
    flex: 0 0 auto;
    background-color: var(--woo-gold);
    -webkit-mask: var(--woo-icon) center / contain no-repeat;
    mask: var(--woo-icon) center / contain no-repeat;
}

.t-ico {
    width: 16px;
    height: 16px;
}

.g-ico {
    width: 26px;
    height: 24px;
}

.i-truck { --woo-icon: url('icons/truck.svg'); }
.i-return { --woo-icon: url('icons/return.svg'); }
.i-cod { --woo-icon: url('icons/cod.svg'); }

.g-truck { --woo-icon: url('icons/truck.svg'); }
.g-shield { --woo-icon: url('icons/shield.svg'); }
.g-return { --woo-icon: url('icons/return.svg'); }
.g-card { --woo-icon: url('icons/card.svg'); }