/* Universal icon styles */
svg {
    min-width: 1rem;
    width: 1rem;
    height: auto;
    color: var(--svg-gray);
    fill: var(--svg-gray);
}

svg.mui-icon {
    /* Temporary */
    --svg-color: var(--svg-gray);
    fill: var(--svg-color);

    * {
        fill: var(--svg-color);
    }
}

/* Semantic Colors */
svg {
    &.icon {
        &.icon-xs,
        &.icon-s,
        &.icon-m,
        &.icon-l,
        &.icon-xl {
           &.icon-black {
               color: black;
               fill: black;
           }

            &.icon-gray {
                color: var(--svg-gray);
                fill: var(--svg-gray);
            }

            &.icon-info {
                color: var(--theme-color);
                fill: var(--theme-color);
            }

            &.icon-brand {
                color: var(--theme-color-darker);
                fill: var(--theme-color-darker);

                * {
                    fill: var(--theme-color-darker);
                }
            }

            &.icon-brand-yellow {
                color: var(--yellow);
                fill: var(--yellow);
            }

            &.icon-success {
                color: var(--success);
                fill: var(--success);
            }

            &.icon-warning {
                color: var(--warning);
                fill: var(--warning);
            }

            &.icon-danger {
                color: var(--danger);
                fill: var(--danger);
            }
        }
    }
}

/* SVG icon styles */
/* SVG icon sizes */
svg {
    &.icon {
        &.icon-xs {
            min-width: 0.75rem;
            width: 0.75rem;
            height: auto;
        }

        &.icon-s {
            min-width: 0.875rem;
            width: 0.875rem;
            height: auto;
        }

        &.icon-m {
            min-width: 1rem;
            max-width: 1rem;
            height: auto;
        }

        &.icon-ml {
            min-width: 1.25rem;
            width: 1.25rem;
            height: auto;
        }

        &.icon-l {
            width: 1.5rem;
            height: auto;
        }

        &.icon-xl {
            width: 2rem;
            height: auto;
        }
    }
}

/* Skeletons */
.icon-skeleton {
    background-color: var(--mid-gray);
    border-radius: 0.255rem;
    height: 1rem;
    width: 1rem;
}

/* Icon animations */
.icon--anim-spin {
    animation: anim-spin 2s infinite;
    animation-timing-function: linear;
    transform-origin: 50% 50%;
    transform-box: fill-box;
}

.icon--anim-shake {
    animation: anim-shake 2s infinite;
    animation-timing-function: linear;
    transform-origin: 50% 0;
    transform-box: fill-box;
}

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

@keyframes anim-shake {
    0% { transform: rotate(0deg); }
    5% {transform: rotate(15deg); }
    10% { transform: rotate(-15deg); }
    15% { transform: rotate(15deg); }
    20% { transform: rotate(-15deg); }
    25% { transform: rotate(15deg); }
    30% { transform: rotate(0deg); }
    100% { transform: rotate(0deg); }
}