/* 独立 SVG 图标通过 mask 复用，颜色跟随当前文本颜色。 */
.icon-mask {
    display: inline-block;
    flex-shrink: 0;
    background-color: currentColor;
    mask: var(--icon) center / contain no-repeat;
    -webkit-mask: var(--icon) center / contain no-repeat;
}

.icon-search {
    --icon: url("/assets/icons/search.svg");
}

.icon-reposted {
    --icon: url("/assets/icons/reposted.svg");
}

.icon-thumbs-up {
    --icon: url("/assets/icons/thumbs-up.svg");
}

.icon-thumbs-down {
    --icon: url("/assets/icons/thumbs-down.svg");
}

.icon-reply {
    --icon: url("/assets/icons/reply.svg");
}

.icon-heart {
    --icon: url("/assets/icons/heart.svg");
}

.icon-retweet {
    --icon: url("/assets/icons/retweet.svg");
}

.icon-forward {
    --icon: url("/assets/icons/forward.svg");
}

.icon-play {
    --icon: url("/assets/icons/play.svg");
}

.icon-verified {
    --icon: url("/assets/icons/verified.svg");
}

.icon-calendar {
    --icon: url("/assets/icons/calendar.svg");
}

.icon-sun {
    --icon: url("/assets/icons/sun.svg");
}

.icon-globe {
    --icon: url("/assets/icons/globe.svg");
}

.icon-share-upload {
    --icon: url("/assets/icons/share-upload.svg");
}

.icon-arrow-up {
    --icon: url("/assets/icons/arrow-up.svg");
}