@use '~@/style/globals';

.Loading {
    $block: &;

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;

    &__spinner {
        width: 2.5em;
        height: 2.5em;
        animation: Loading--rotate 2000ms linear infinite;

        &__path {
            stroke: currentColor;
            stroke-linecap: round;
            stroke-width: 4;
            animation: Loading--dash 1500ms ease-in-out infinite;
        }
    }

    &__text {
        margin-top: 10px;
        font-weight: 300;
        font-style: italic;
    }

    &--horizontal {
        flex-direction: row;
        color: globals.$text-nav-color;
        font-size: 1.1rem;

        #{$block}__text {
            margin-top: 0;
            margin-left: 10px;
        }
    }
}

//
// - Animation
//

@keyframes Loading--rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes Loading--dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}
