@import "../colors";
@import "../variables";

$loading_balls_default_width: 220px;
$loading_balls_medium_width: 120px;

.LoadingBalls {
    display: flex;
    flex-direction: row;
    width: $loading_balls_default_width;

    &-medium {
        width: $loading_balls_medium_width;
    }
}

.LoadingBalls-wrapper {
    align-items: center;
    display: flex;
    justify-content: center;
    padding: $offset_main * 3;
    text-align: center;
    width: 100%;
}

.LoadingBalls-item {
    animation: loading-balls 1.2s ease-out infinite;
    animation-fill-mode: both;
    background: $timberwolf;
    border-radius: 50%;
    position: relative;
    width: (100% / 5);

    @for $i from 0 through 4 {
        &-#{$i} {
            animation-delay: .1s * $i;
        }
    }

    &::after {
        content: "";
        display: block;
        padding-bottom: 100%;
        width: 100%;
    }

    & + & {
        margin-left: 4.5%;
    }
}

@keyframes loading-balls {
    0% {
        transform: scale(.5);
    }
    25% {
        transform: scale(1);
    }
    75% {
        transform: scale(.5);
    }
    100% {
        transform: scale(.5);
    }
}