$loading-color: #333333 !default;
$loading-size: 30px !default;
$loading-spinner-duration: 1.2s !default;
$loading-circular-duration: 2s !default;
$loading-text-size: 12px !default;

$loading-colors:(
    'loading-gray': $loading-color,
    'brand': $brand
) !default;

$loading-theme-colors: map-merge(
    $map1: $auxiliary-colors,
    $map2: $loading-colors
) !default;

.mx{
    &-loading{
        position: relative;
        color: $loading-color;
        font-size: 0;
        vertical-align: middle;

        &--vertical{
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        @each $name, $color in $loading-theme-colors{
            &--#{$name}{
                color: $color;
            }
        }

        &-spinner{
            position: relative;
            display: inline-block;
            width: $loading-size;
            max-width: 100%;
            height: $loading-size;
            max-height: 100%;
            vertical-align: middle;
            animation: mx-rotate $duration linear infinite;

            &--spinner{
                animation-timing-function: steps(8);
                animation-duration: $loading-spinner-duration;
            }

            &--circular{
                animation-duration: $loading-circular-duration;
            }
        }

        &-circular{
            display: block;
            width: 100%;
            height: 100%;

            circle{
                animation: mx-circular 1.5s ease-in-out infinite;
                stroke: currentColor;
                stroke-width: 3;
                stroke-linecap: round;
            }
        }

        &-line{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;

            &::before{
                display: block;
                width: 2.5px;
                height: 25%;
                margin: 0 auto;
                background-color: currentColor;
                border-radius: 1.25px;
                content: '';
            }

            @for $index from 1 through 8 {
                &--#{$index}{
                    transform: rotate($index * 45deg);
                    opacity: 0.3 + ($index - 1) * 0.1;
                }
            }
        }

        &-text{
            display: inline-block;
            font-size: $loading-text-size;
            vertical-align: middle;
            margin-left: $padding-sm;

            &--vertical{
                margin-left: 0;
                margin-top: $padding-sm;
            }
        }
        
        @keyframes mx-circular {
            0% {
                stroke-dasharray: 1, 200;
                stroke-dashoffset: 0;
            }
            
            50% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -40;
            }
            
            100% {
                stroke-dasharray: 90, 150;
                stroke-dashoffset: -120;
            }
        }
    }
}