@import "themes";

@keyframes reveal {
      0% { opacity: 0; }
    100% { opacity: 1; }
}

.anim-reveal {
    animation: reveal 700ms ease;
}

.anim-delete {
    height: 0px;
    overflow: hidden;
    transition: height 200ms;
}

.loader {
    @include size(15px);
    margin: 26px auto;
    background-color: #333;
    color: #777;
    border-radius: 100%;
    animation: loading 1.0s ease-in-out infinite;
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    display: block;

	@include on-theme(dark) {
		background-color: $dark-text-color-2;
	}
}

.loader-error {
    width: 100%;
    animation: none;
    background-color: transparent;

    @include on-theme(dark) {
        background-color: transparent;
    }
}

@keyframes loading {
    0% {
        opacity: 1;
        transform: scale(0);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}

@keyframes shake {
    20% { transform: translateX(10px); }
    40% { transform: translateX(-10px); }
    60% { transform: translateX(5px); }
    80% { transform: translateX(-5px); }
}

.anim-shake {
    animation: shake 350ms ease-in-out;
}

@keyframes bounceOut {
    0% {
        transform: scale(1);
    }

    25% {
        transform: scale(.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(.3);
    }
}

.anim-bounce-out {
    animation: bounceOut 1s ease-in-out both;
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }

    60% {
        opacity: 1;
        transform: translateY(30px);
    }

    80% {
        transform: translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.anim-bounceInDown {
    animation: bounceInDown 500ms ease-in-out both;
}
