.slide-out-up {
    animation: slideOutUp .35s ease forwards;
}

.slide-in-down {
    animation: slideInDown .35s ease forwards;
}

.fade-in {
    animation: fadeIn .25s ease forwards;
}

.fade-out {
    animation: fadeOut .25s ease forwards;
}

@keyframes slideOutUp {
    to {
        transform: translateY(-16px);
        opacity: 0;
    }
}

@keyframes slideInDown {
    from {
        transform: translateY(-16px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}
/* utility so we can toggle opacity separately from display */
.opacity-0 {
    opacity: 0;
}