// ==========================================================================
// Shared Icon System
// Renders any SVG from assets/images/icons/ as a CSS mask, so its color
// follows `color`/currentColor instead of being baked into the SVG file.
// See templates/components/_icon.html.twig for the markup this styles.
// ==========================================================================

.icon {
    display: inline-block;
    width: var(--icon-width, var(--icon-size, 20px));
    height: var(--icon-height, var(--icon-size, 20px));
    flex-shrink: 0;
    background-color: currentColor;
    mask-image: var(--icon-url);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    -webkit-mask-image: var(--icon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}