/**
    This file contains the CSS style for the logo-loading macro, with 4 types of rotations.
    The macro can be viewed at: "legislativo/templates/core/macro/loading/_logo_loading.html"
 */

.image-container {
    position: relative;
    width: 50px;
    height: 50px;
    display: inline-block;
    bottom: 10px;
    right: 12px;
}

.overlay-image {
    position: absolute;
    top: 0;
    left: 0;
}

.ball {
    filter: invert(16%) sepia(7%) saturate(7383%) hue-rotate(187deg) brightness(87%) contrast(111%);
}

.moon {
    filter: invert(27%) sepia(90%) saturate(4489%) hue-rotate(352deg) brightness(100%) contrast(82%);
}

/* Type 1 - ping-pong-rotate */

.ping-pong-rotate {
    animation: ping-pong-rotate 1s infinite linear;
    transform-origin: 0% 100%;
}

@keyframes ping-pong-rotate {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease;
    }
    50% {
        transform: rotate(78deg);
        animation-timing-function: ease;
    }
    100% {
        transform: rotate(0deg);
        animation-timing-function: ease;
    }
}

/* Type 2 - full-rotation */

.full-rotation-ball {
    animation: full-rotation-ball 1s infinite linear;
    transform-origin: 0% 100%;
}

.full-rotation-moon {
    animation: full-rotation-moon 1s infinite linear;
    transform-origin: 0% 100%;
}

@keyframes full-rotation-ball {
    0% {
        transform: rotate(38deg);
        animation-timing-function: ease;
    }
    5% {
        transform: rotate(38deg);
        animation-timing-function: ease;
    }
    100% {
        transform: rotate(398deg);
        animation-timing-function: ease;
    }
}

@keyframes full-rotation-moon {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease;
    }
    95% {
        transform: rotate(360deg);
        animation-timing-function: ease;
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: ease;
    }
}

/* Type 3 - elastic-full-rotation */

.elastic-full-rotation-ball {
    animation: elastic-full-rotation-ball 1s infinite linear;
    transform-origin: 0% 100%;
}

.elastic-full-rotation-moon {
    animation: elastic-full-rotation-moon 1s infinite linear;
    transform-origin: 0% 100%;
}

@keyframes elastic-full-rotation-ball {
    0% {
        transform: rotate(38deg);
        animation-timing-function: ease;
    }
    5% {
        transform: rotate(38deg);
        animation-timing-function: ease;
    }
    35% {
        transform: rotate(-2deg);
        animation-timing-function: ease;
    }
    100% {
        transform: rotate(398deg);
        animation-timing-function: ease;
    }
}

@keyframes elastic-full-rotation-moon {
    0% {
        transform: rotate(0deg);
        animation-timing-function: ease;
    }
    30% {
        transform: rotate(-40deg);
        animation-timing-function: ease;
    }
    95% {
        transform: rotate(360deg);
        animation-timing-function: ease;
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: ease;
    }
}

/* Type 4 - Constant rotation */

.constant-rotation-ball {
    animation: constant-rotation-ball 1s infinite linear;
    transform-origin: 0% 100%;
}

.constant-rotation-moon {
    animation: constant-rotation-moon 2s infinite linear;
    transform-origin: 0% 100%;
}

@keyframes constant-rotation-ball {
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }
}

@keyframes constant-rotation-moon {
    0% {
        transform: rotate(0deg);
        animation-timing-function: linear;
    }
    100% {
        transform: rotate(360deg);
        animation-timing-function: linear;
    }
}