/**
 * Icons & Pictograms System
 * Based on Renault Digital Standard Guide - Page 24
 */

/* ============================================
   ICON SIZES - DESKTOP
   ============================================ */

.icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.icon-24 {
    width: 24px;
    height: 24px;
}

.icon-30 {
    width: 30px;
    height: 30px;
}

.icon-32 {
    width: 32px;
    height: 32px;
}

.icon-40 {
    width: 40px;
    height: 40px;
}

.icon-57 {
    width: 57px;
    height: 57px;
}

/* Desktop Usage Examples */
.icon-droplist,
.icon-slider {
    width: 24px;
    height: 24px;
}

.icon-footer {
    width: 30px;
    height: 30px;
}

.icon-action-panel,
.icon-horizontal-gallery {
    width: 32px;
    height: 32px;
}

.icon-animated-cards,
.icon-prefooter {
    width: 40px;
    height: 40px;
}

.icon-action-panel-large {
    width: 57px;
    height: 57px;
}

/* ============================================
   ICON SIZES - MOBILE
   ============================================ */

@media (max-width: 768px) {
    .icon-48 {
        width: 48px;
        height: 48px;
    }
    
    /* Mobile Usage Examples */
    .icon-action-panel-mobile {
        width: 48px;
        height: 48px;
    }
    
    /* Animated Cards & Prefooter can use 32px or 40px on mobile */
    .icon-animated-cards-mobile,
    .icon-prefooter-mobile {
        width: 32px;
        height: 32px;
    }
    
    .icon-animated-cards-mobile-large,
    .icon-prefooter-mobile-large {
        width: 40px;
        height: 40px;
    }
}

/* ============================================
   ICON STYLES
   ============================================ */

.icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
}

.icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Icon Colors */
.icon-black {
    color: #000000;
}

.icon-white {
    color: #FFFFFF;
}

.icon-yellow {
    color: #EFDF00;
}

.icon-grey {
    color: #888B8D;
}

/* ============================================
   ICON USAGE SUMMARY
   ============================================

   Desktop:
   - 24px: Droplist, Slider
   - 30px: Footer
   - 32px: Slider, Action panel, Horizontal Gallery
   - 40px: Animated Cards Images & Text, Prefooter
   - 57px: Action panel

   Mobile:
   - 24px: Droplist, Slider
   - 30px: Footer
   - 32px: Slider, Action panel, Horizontal Gallery
   - 32px/40px: Animated Cards Images & Text, Prefooter
   - 48px: Action panel

*/