@import '../variables';

// Animation
@keyframes sk-bouncedelay {
    0%, 80%, 100% {
        opacity: 0;
    } 40% {
        opacity: 1;
    }
}

@mixin spinner-dot($dot-size: .75rem) {
    width: $dot-size;
    height: $dot-size;
    background-color: $ec-color-active;
    animation: sk-bouncedelay 1.7s infinite ease-in-out both;
    margin-right: $dot-size / 3;

    &:nth-child(1) {
        animation-delay: -0.60s;
    }

    &:nth-child(2) {
        animation-delay: -0.40s;
    }

    &:nth-child(3) {
        animation-delay: -0.20s;
    }
}

@mixin spinner {
    display: flex;
}
