i {
    transition: var(--global-transition);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mdi {
    padding: 0 !important;
}

.i-small {
    font-size:15px;
}

.i-medium {
    font-size:24px;
}

.i-mediumlarge {
    font-size:26px;
}

.i-large {
    font-size:30px;
}

.i-extralarge {
    font-size: 35px;
}

button.secondary .mdi {
    opacity: 70%;
}

.btn-sm .mdi.i-medium {
    position: relative;
    top: -1px;
}

.btn-sm .mdi.i-mediumlarge {
    position: relative;
    top: -9px;
}

.btn-sm .mdi.i-mediumlarge + span {
    position: relative;
    top: -12px;
}

.btn-sm .mdi.i-large {
    position: relative;
    top: -12px;
}

.btn-sm .mdi.i-large + span {
    position: relative;
    top: -17px;
}

.mdi.color {
    color: var(--primary-color);
}

.mdi.danger {
    color: var(--danger-color);
}

.mdi.success {
    color: var(--success-color);
}

.mdi-spin:before {
    -webkit-animation: mdi-spin 0.3s infinite linear;
    animation: mdi-spin 0.3s infinite linear;
}

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

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