@import "variables";

.data-flow-left, .data-flow-right {
    background-color: $brand-color;
    width: 0;
    height: calc(0.05 * var(--width-unit));
    position: absolute;
    top: calc(0.95 * var(--width-unit));
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQYV2MU3v75PwMDA8NbT15GEM1IugAAWIwQBUszJIoAAAAASUVORK5CYII=) repeat;
}
.data-flow-left {
    left: 0;
    animation: flowLeft;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.data-flow-right {
    right: 0;
    animation: flowRight;
    animation-duration: 0.3s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes flowLeft {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: -4px;
    }
}

@keyframes flowRight {
    0% {
        background-position-x: 0;
    }
    100% {
        background-position-x: 4px;
    }
}