@import '../1-Helpers/variables';
@import '../1-Helpers/mixins';

.loader {
    width: 100%;

    &.hvcenter {
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &.linear .el {
            width: 80%;
        }
    }
    
    &.linear {
        text-align: center;
        
        &.infinite .el::before {
            animation: load .8s ease-in-out infinite;
        }

        .el {
            width: 100%;
            height: 5px;
            position: relative;
            border-radius: 100px;
            overflow: hidden;
            margin-bottom: 5px;

            @include themify {
                background-color: themed('cardShadow');
            }

            &::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                height: 100%;
                // min-width: 30px;
                border-radius: inherit;
                background-color: $secondary-color;
            }

            .progress {
                width: 0;
                height: 100%;
                background: $blue;
                border-radius: inherit;
                transition: $transition-slow-out;
            }
        }

        .text {
            color: $grey-dark-1;
        }
    }
}

@keyframes load {
    0% {
        left: 0;
        width: 10%;
        transform: translateX(-100%);
    }
    50% {
        width: 60%;
    }
    90% {
        width: 10%
    }
    100% {
        left: 100%;
    }
}