// ============================================================================
// Imports
// ============================================================================

@use "../../../variables" as *;

// ============================================================================
// Mixins | Preloader | Lines
// ============================================================================

@mixin preloader_lines {
    width: q(100);
    height: q(100);
    display: flex;
    justify-content: center;
    align-items: center;
}

@mixin preloader_line {
    background-color: rgb(10, 128, 136);
    width: q(8);
    height: q(140);
    margin: 0 q(5);
    border: none;
    animation: preloader_line_animation 0.8s infinite linear;
    border-radius: q(20);
}

@mixin preloader_line_1 {
    animation-delay: 0.6s;
}

@mixin preloader_line_2 {
    animation-delay: 0.3s;
}

@mixin preloader_line_3 {
    animation-delay: 0s;
}

@mixin preloader_line_4 {
    animation-delay: 0.3s;
}

@mixin preloader_line_5 {
    animation-delay: 0.6s;
}

@keyframes preloader_line_animation {
    0% {
        height: q(140);
    }
    25% {
        height: q(60);
    }
    50% {
        height: q(90);
    }
    75% {
        height: q(60);
    }
    100% {
        height: q(140);
    }
}