/*
 * Material Icons Base Styles
 * Google Material Symbols Rounded icon styling
 * 
 * @package IntrosMatter
 * @since 1.0.0
 */

/* Material Icons Base Class */
.material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Icon Size Variations */
.material-symbols-rounded.size-16 {
    font-size: 16px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 16;
}

.material-symbols-rounded.size-20 {
    font-size: 20px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
}

.material-symbols-rounded.size-24 {
    font-size: 24px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.size-32 {
    font-size: 32px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 32;
}

.material-symbols-rounded.size-48 {
    font-size: 48px;
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 48;
}

/* Icon Weight Variations */
.material-symbols-rounded.weight-100 {
    font-variation-settings:
        'FILL' 0,
        'wght' 100,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-200 {
    font-variation-settings:
        'FILL' 0,
        'wght' 200,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-300 {
    font-variation-settings:
        'FILL' 0,
        'wght' 300,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-400 {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-500 {
    font-variation-settings:
        'FILL' 0,
        'wght' 500,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-600 {
    font-variation-settings:
        'FILL' 0,
        'wght' 600,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.weight-700 {
    font-variation-settings:
        'FILL' 0,
        'wght' 700,
        'GRAD' 0,
        'opsz' 24;
}

/* Fill Variations */
.material-symbols-rounded.fill-0 {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.fill-1 {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Gradient Variations */
.material-symbols-rounded.grad-0 {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

.material-symbols-rounded.grad-200 {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 200,
        'opsz' 24;
}

/* Common Icon Styles */
.icon-home {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 20;
}

.icon-chevron-right {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 16;
}

.icon-linkedin {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

/* Responsive Icon Sizes */
@media (max-width: 768px) {
    .material-symbols-rounded {
        font-size: 20px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 20;
    }
    
    .material-symbols-rounded.size-16 {
        font-size: 14px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 14;
    }
    
    .material-symbols-rounded.size-20 {
        font-size: 18px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 18;
    }
    
    .material-symbols-rounded.size-24 {
        font-size: 20px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 20;
    }
    
    .material-symbols-rounded.size-32 {
        font-size: 28px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 28;
    }
    
    .material-symbols-rounded.size-48 {
        font-size: 40px;
        font-variation-settings:
            'FILL' 0,
            'wght' 400,
            'GRAD' 0,
            'opsz' 40;
    }
}