.icon {
    width: 1rem;
    height: 1rem;
    background-color: currentcolor;
    mask-image: var(--icon-mask-image);
    mask-position: center;
    mask-repeat: no-repeat;
}

.icon-back {
    --icon-mask-image: url("/images/back.svg");
}
.icon-close {
    --icon-mask-image: url("/images/close.svg");
}
.icon-demos {
    --icon-mask-image: url("/images/demos.svg");
}
.icon-docs {
    --icon-mask-image: url("/images/doc.svg");
}
.icon-menu {
    --icon-mask-image: url("/images/menu.svg");
}

/* pages */
.icon-counter {
    --icon-mask-image: url("/images/pages/counter.svg");
}
.icon-home {
    --icon-mask-image: url("/images/pages/home.svg");
}
.icon-weather {
    --icon-mask-image: url("/images/pages/weather.svg");
}

/* Variables CSS pour les icônes */
:root {
    --icon-default-size: 24px;
    --icon-opacity: 0.9;
}

/* Classe de base pour tous les icônes */
.icon-base {
    display: flex;
    height: var(--icon-default-size);
    width: var(--icon-default-size);
    opacity: var(--icon-opacity);
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
}

/* Applique automatiquement les propriétés de base à toutes les classes commençant par 'swsico-' */
[class*="swsico-"] {
    display: flex;
    height: var(--icon-default-size);
    width: var(--icon-default-size);
    opacity: var(--icon-opacity);
    background-color: currentColor;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-size: contain;
    mask-position: center;
    -webkit-mask-position: center;
    /* Utilise la variable --icon-url si elle est définie */
    mask-image: var(--icon-url);
    -webkit-mask-image: var(--icon-url);
}

.swsico-microsoft {
    background-image: url("../images/microsoft-logo.svg");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}