/*
 * Utility helpers compatible with FA-style sizing/rotation classes
 * after migrating icon markup to MDI.
 */

.mdi-fw {
    width: 1.25em;
    text-align: center;
    display: inline-block;
}

.mdi-lg {
    font-size: 1.33333333em;
    line-height: 0.75em;
    vertical-align: -0.0667em;
}

.mdi-xs { font-size: 0.75em; }
.mdi-sm { font-size: 0.875em; }

.mdi-1x { font-size: 1em; }
.mdi-2x { font-size: 2em; }
.mdi-3x { font-size: 3em; }
.mdi-4x { font-size: 4em; }
.mdi-5x { font-size: 5em; }
.mdi-6x { font-size: 6em; }
.mdi-7x { font-size: 7em; }
.mdi-8x { font-size: 8em; }
.mdi-9x { font-size: 9em; }
.mdi-10x { font-size: 10em; }

.mdi-spin {
    animation: mdi-utility-spin 2s linear infinite;
}

.mdi-pulse {
    animation: mdi-utility-spin 1s steps(8) infinite;
}

.mdi-rotate-90 {
    transform: rotate(90deg);
}

.mdi-rotate-180 {
    transform: rotate(180deg);
}

.mdi-rotate-270 {
    transform: rotate(270deg);
}

.mdi-flip-horizontal {
    transform: scaleX(-1);
}

.mdi-flip-vertical {
    transform: scaleY(-1);
}

@keyframes mdi-utility-spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}