@import '../styles/variables';

@mixin global-animation() {
    animation-fill-mode: both;
}

@mixin balls() {
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg) scale(1);
        -webkit-transform: rotate(0) scale(1);
    }
    50% {
        transform: rotate(180deg) scale(0.6);
        -webkit-transform: rotate(180deg) scale(0.6);
    }
    100% {
        transform: rotate(360deg) scale(1);
        -webkit-transform: rotate(360deg) scale(1);
    }
}

.ball-clip-rotate {
    > div {
        @include balls();
        @include global-animation();

        border: 2px solid $clickable-item;
        border-bottom-color: transparent !important;
        display: inline-block;
        animation: rotate 0.75s 0s linear infinite;
    }
}