@keyframes fade-in {
    from {
        background-color: var(--transparent);
        backdrop-filter: blur(0px);
    }

    to {
        background-color: var(--transparent-dark);
        backdrop-filter: blur(3px);
    }
}

@keyframes fade-out {
    from {
        background-color: var(--transparent-dark);
        backdrop-filter: blur(3px);
    }

    to {
        background-color: var(--transparent);
        backdrop-filter: blur(0px);
    }
}

@keyframes slide-up {
    from {
        top: 100%;
    }

    to {
        top: 0px;
    }
}

@keyframes slide-down {
    from {
        top: 0px;
    }

    to {
        top: 100%;
    }
}

@keyframes slide-left-in {
    from {
        left: -100%;
    }

    to {
        left: 0px;
    }
}

@keyframes slide-left-out {
    from {
        left: 0px;
    }

    to {
        left: -100%;
    }
}

@keyframes slide-right-in {
    from {
        left: 100%;
    }

    to {
        left: 0px;
    }
}

@keyframes slide-right-out {
    from {
        left: 0px;
    }

    to {
        left: 100%;
    }
}