/**
 *  Stáj-Komarice z.s. - Web
 * 
 *  Tento soubor byl navržen speciálně pro použití při vývoji
 *  stránek pro Stáj-Komarice z.s.
 *  Veškerá práva vyhrazena.
 * 
 *  @copyright Staj-Komarice z.s. (c) 2022 
 *  @author Filip Vacek <filipvacek67@gmail.com> <filipvacek67@gmail.com>
 */

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}

@keyframes slide-in {
    0% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
}

@-webkit-keyframes slide-in {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

@keyframes slide-out {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

@-webkit-keyframes slide-out {
    0% {
        -webkit-transform: translateX(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateX(-100%);
        opacity: 0;
    }
}

/* Drop in - Drop out */
.drop-in {
    animation: drop-in 0.5s forwards;
    -webkit-animation: drop-in 0.5s forwards;
}

.drop-out {
    animation: drop-out 0.5s forwards;
    -webkit-animation: drop-out 0.5s forwards;
}

@keyframes drop-in {
    0% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
}

@-webkit-keyframes drop-in {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes drop-out {
    0% {
        transform: translateY(0%);
        opacity: 1;
    }
    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@-webkit-keyframes drop-out {
    0% {
        -webkit-transform: translateY(0%);
        opacity: 1;
    }
    100% {
        -webkit-transform: translateY(-100%);
        opacity: 0;
    }
}

.skeleton {
    animation: skeleton-loading 1s linear infinite alternate;
    -webkit-animation: skeleton-loading 1s linear infinite alternate;
}

@keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }
    100% {
        background-color: hsl(200, 20%, 95%);
    }
}

@-webkit-keyframes skeleton-loading {
    0% {
        background-color: hsl(200, 20%, 70%);
    }
    100% {
        background-color: hsl(200, 20%, 70%);
    }
}