@layer utilities {
    /* Panels fade/slide in while active, fade out when leaving */
    @keyframes panel-fade {
        0% {
            opacity: 0;
            transform: translateY(1rem)
        }

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

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

        100% {
            opacity: 0;
            transform: translateY(-0.5rem)
        }
    }
    /* Toggle a pill to its "active" look during its range */
    @keyframes pill-on {
        0% {
            background-color: white;
            color: rgb(13 148 136);
            box-shadow: inset 0 0 0 1px rgb(215,247,240 / .5)
        }

        10% {
            background-color: rgb(13 148 136);
            color: white;
            box-shadow: inset 0 0 0 1px rgb(13 148 136)
        }

        100% {
            background-color: rgb(13 148 136);
            color: white;
            box-shadow: inset 0 0 0 1px rgb(13 148 136)
        }
    }
}