@keyframes rectangleRTL {
    100% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 50% 50%;
    }
    0% {
        background-position: 100% 100%;
    }
}

@mixin animated($angleDeg: 90) {
    animation: rectangleRTL 2s linear infinite;
    animation-timing-function: linear;
    background:
        linear-gradient(
            ($angleDeg) + deg,
            var(--gray-200) 30%,
            var(--white) 50%,
            var(--gray-200) 70%
        );
    background-color: var(--gray-200);
    background-size: 400%;
}

@mixin animated-dark($angleDeg: 90) {
    @include animated($angleDeg);

    background-color: var(--gray-500);
    background-image:
        linear-gradient(
            ($angleDeg) + deg,
            var(--gray-500) 30%,
            var(--gray-800) 50%,
            var(--gray-500) 70%
        );
}

@mixin element($width: 20%, $height: 20px) {
    height: $height;
    overflow: hidden;
    width: $width;

    @include animated();
}

@mixin element-icon() {
    border-radius: 3px;

    @include element(40px, 40px);
    @include animated(135);
}

@mixin element-icon-large() {
    border-radius: 3px;

    @include element(65px, 65px);
    @include animated(135);
}

@mixin vertical() {
    display: flex;
    flex-direction: column;
}

@mixin horizontal() {
    align-items: center;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}