@mixin center-v() {
    align-items: center;
    display: flex;
}

@mixin center-vh() {
    @include center-v();
    justify-content: center;
}

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

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

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

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

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

    @include loader();
}

@mixin loader-element-square($size: 40px) {
    border-radius: 3px;

    @include loader-element($size, $size);
    @include loader(135);
}

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

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

@mixin fonttype-label {
    color: $gray-600;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
}