/* Import Material Symbols Rounded font */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

/* Native Icon Styles */
.native-icon {
    /* Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Size */
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);

    /* Color */
    color: var(--native-icon-color, currentColor);

    /* Shape */
    border-radius: var(--native-icon-shape, 0);

    /* Cursor */
    cursor: inherit;

    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Smooth rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.native-icon-symbol {
    /* Material Symbols font */
    font-family: 'Material Symbols Rounded', sans-serif;
    font-weight: var(--native-icon-weight, 400);
    font-size: var(--icon-size, 24px);

    /* Icon properties */
    font-style: normal;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;

    /* Default outlined style */
    font-variation-settings: 'FILL' 0, 'wght' var(--native-icon-weight, 400), 'GRAD' 0, 'opsz' 24;

    /* Color inheritance */
    color: inherit;

    /* Size */
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);

    /* Center content */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Filled variant */
.native-icon-symbol.filled {
    font-variation-settings: 'FILL' 1, 'wght' var(--native-icon-weight, 400), 'GRAD' 0, 'opsz' 24;
}

.native-icon-image {
    /* Size */
    width: var(--icon-size, 24px);
    height: var(--icon-size, 24px);

    /* Fit */
    object-fit: contain;
    object-position: center;

    /* No border */
    border: none;

    /* Display */
    display: block;
}

/* Error state */
.native-icon-symbol.error {
    color: var(--native-icon-error-color, #f44336);
    opacity: 0.6;
}

/* Size variants */
.native-icon.small {
    --icon-size: 16px;
}

.native-icon.medium {
    --icon-size: 24px;
}

.native-icon.large {
    --icon-size: 32px;
}

.native-icon.extra-large {
    --icon-size: 48px;
}

/* Custom properties for easy customization */
.native-icon {
    --native-icon-color: currentColor;
    --native-icon-weight: 400;
    --native-icon-shape: 0;
    --native-icon-error-color: #f44336;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .native-icon-symbol {
        font-weight: 700;
        --native-icon-weight: 700;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .native-icon:hover .native-icon-symbol {
        transition: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .native-icon {
        --native-icon-color: #ffffff;
    }
}

/* Light mode support */
@media (prefers-color-scheme: light) {
    .native-icon {
        --native-icon-color: #000000;
    }
}

/* Responsive design */
@media (max-width: 768px) {
    .native-icon {
        --icon-size: 20px;
    }

    .native-icon.large {
        --icon-size: 28px;
    }

    .native-icon.extra-large {
        --icon-size: 40px;
    }
}

/* Focus states for accessibility */
.native-icon:focus {
    outline: 2px solid var(--native-icon-focus-color, #007bff);
    outline-offset: 2px;
}

.native-icon:focus:not(:focus-visible) {
    outline: none;
}

/* Interactive icons */
.native-icon.interactive {
    cursor: pointer;
}

.native-icon.interactive:hover {
    transform: scale(1.1);
}

.native-icon.interactive:active {
    transform: scale(0.95);
    opacity: 0.8;
}

/* Disabled state */
.native-icon.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.native-icon.disabled:hover {
    transform: none;
}

/* Loading state */
.native-icon.loading .native-icon-symbol {
    animation: icon-spin 1s linear infinite;
}

@keyframes icon-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Color variants */
.native-icon.primary {
    --native-icon-color: #007bff;
}

.native-icon.secondary {
    --native-icon-color: #6c757d;
}

.native-icon.success {
    --native-icon-color: #28a745;
}

.native-icon.danger {
    --native-icon-color: #dc3545;
}

.native-icon.warning {
    --native-icon-color: #ffc107;
}

.native-icon.info {
    --native-icon-color: #17a2b8;
}

.native-icon.light {
    --native-icon-color: #f8f9fa;
}

.native-icon.dark {
    --native-icon-color: #343a40;
}