/* =========================================================
   ICON SYSTEM - vbx-icons.css
   ========================================================= */

:root {
    --vbx-icon-color-muted: #767676;
    --vbx-icon-color-primary: #008489;
    --vbx-icon-sprite-path: '/vbx/fonts/vbx-icons.svg';
}

/* ========================================
   CLASSES DE BASE
   ======================================== */

.vbx-icon {
    width: 20px;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
}

/* Variantes de taille */
.vbx-icon--sm { width: 16px; height: 16px; }
.vbx-icon--md { width: 24px; height: 24px; }
.vbx-icon--lg { width: 32px; height: 32px; }

/* ========================================
   COULEUR VIA currentColor
   ======================================== */

.vbx-icon use {
    fill: currentColor;
}

.vbx-icon--muted { color: var(--vbx-icon-color-muted); }
.vbx-icon--primary { color: var(--vbx-icon-color-primary); }

/* ========================================
   GRADIENTS (référencent les defs du HTML)
   ======================================== */

.vbx-icon--gradient use {
    fill: url(#vbx-gradient-primary);
}

.vbx-icon--gradient-hover:hover use {
    fill: url(#vbx-gradient-primary-hover);
}