/* ============================================
   ICONE PUBBLICHE per HEXTASK (solo home e menu)
   ============================================ */

/*
.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}
*/
/*
/* ===== TRATTAMENTO SPECIALE per icone con viewBox problematico =====
.icon {
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
}
*/

.icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    
    /* Default */
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* Override per icone con viewBox non standard */
.icon {
    -webkit-mask-size: cover !important;
    mask-size: cover !important;
}

/* ===== REGOLE SINGOLE ===== */
.icon-close {
    -webkit-mask: url('/assets/icons/close.svg') no-repeat center;
    mask: url('/assets/icons/close.svg') no-repeat center;
}
.icon-menu {
    -webkit-mask: url('/assets/icons/menu.svg') no-repeat center;
    mask: url('/assets/icons/menu.svg') no-repeat center;
}
.icon-alternate_email {
    -webkit-mask: url('/assets/icons/alternate_email.svg') no-repeat center;
    mask: url('/assets/icons/alternate_email.svg') no-repeat center;
}
.icon-home_iot_device {
    -webkit-mask: url('/assets/icons/home_iot_device.svg') no-repeat center;
    mask: url('/assets/icons/home_iot_device.svg') no-repeat center;
}
.icon-shield_locked {
    -webkit-mask: url('/assets/icons/shield_locked.svg') no-repeat center;
    mask: url('/assets/icons/shield_locked.svg') no-repeat center;
}
.icon-videocam {
    -webkit-mask: url('/assets/icons/videocam.svg') no-repeat center;
    mask: url('/assets/icons/videocam.svg') no-repeat center;
}
.icon-charger {
    -webkit-mask: url('/assets/icons/charger.svg') no-repeat center;
    mask: url('/assets/icons/charger.svg') no-repeat center;
}
.icon-lock {
    -webkit-mask: url('/assets/icons/lock.svg') no-repeat center;
    mask: url('/assets/icons/lock.svg') no-repeat center;
}
.icon-factory {
    -webkit-mask: url('/assets/icons/factory.svg') no-repeat center;
    mask: url('/assets/icons/factory.svg') no-repeat center;
}
.icon-lightbulb {
    -webkit-mask: url('/assets/icons/lightbulb.svg') no-repeat center;
    mask: url('/assets/icons/lightbulb.svg') no-repeat center;
}
.icon-radar {
    -webkit-mask: url('/assets/icons/radar.svg') no-repeat center;
    mask: url('/assets/icons/radar.svg') no-repeat center;
}
.icon-send {
    -webkit-mask: url('/assets/icons/send.svg') no-repeat center;
    mask: url('/assets/icons/send.svg') no-repeat center;
}

/* ===== CLASSI DIMENSIONE ===== */

/* Dimensioni */
.icon.small { width: 14px !important; height: 14px !important; }
.icon.medium { width: 32px !important; height: 32px !important; }
.icon.large { width: 48px !important; height: 48px !important; }
.icon.xs { width: 10px !important; height: 10px !important; }
.icon.sm { width: 14px !important; height: 14px !important; }
.icon.md { width: 18px !important; height: 18px !important; }
.icon.lg { width: 24px !important; height: 24px !important; }
.icon.s { width: 14px !important; height: 14px !important; }
.icon.m { width: 18px !important; height: 18px !important; }
.icon.l { width: 24px !important; height: 24px !important; }
.icon.xl { width: 32px !important; height: 32px !important; }
.icon.xxl { width: 48px !important; height: 48px !important; }


/* ===== COLORI DI UTILITY ===== */
.icon.text-custom { background-color: #8C1A10; }
.icon.text-orange { background-color: #FF6900; }
.icon.text-warning { background-color: #FF9F2E; }
.icon.text-secondary { background-color: #94A3B8; }
.icon.text-light { background-color: #F8FAFC; }
.icon.text-white { background-color: #ffffff; }
.icon.text-danger { background-color: #c50000; }
.icon.text-success { background-color: #22c55e; }