//== Loading Indicator
//
//## Classes for loading indicator

@import '../mixins';


@keyframes daptiv-loading {
    0% {
        background-color: $color-primary-light;
        height: $loading-item-dimension-min;
        transform: translateY(0);
        width: $loading-item-dimension-min;
    }

    100% {
        background-color: $color-primary-dark;
        height: $loading-item-dimension-max;
        transform: translateY($loading-item-y-movement);
        width: $loading-item-dimension-max;
    }
}

.daptiv-loading {

    @include center-vertical();
    height: $loading-height;
    margin: auto;
    text-align: center;
    width: $loading-width;

    & > span:nth-last-of-type(1) {
        animation-delay: 0s;
    }

    & > span:nth-last-of-type(2) {
        animation-delay: 0.2095s;
    }

    & > span:nth-last-of-type(3) {
        animation-delay: 0.429s;
    }

    & > span {
        animation: daptiv-loading 0.715s infinite alternate;
        background: $color-primary-light;
        border-radius: $loading-item-radius;
        display: inline-block;
        height: $loading-item-dimension;
        margin: $loading-item-margin;
        vertical-align: middle;
        width: $loading-item-dimension;
    }
}