@layer components {
    .floating-cta {
        position: fixed;
        bottom: 1.5rem; /* bottom-6 */
        right: 1.5rem; /* right-6 */
        z-index: 50; /* z-50 */

        & .floating-cta__button {
            display: flex;
            align-items: center;
            gap: 0.75rem; /* gap-3 */
            padding-inline: 2rem; /* px-8 */
            padding-block: 1.25rem; /* py-5 */
            background-color: var(--clr-red-600); /* bg-red-600 */
            color: var(--color-white);
            font-weight: 900; /* font-black */
            border-radius: var(--radius-2xl); /* rounded-2xl */
            border: var(--border-thin) solid color-mix(in srgb, var(--color-white), transparent 80%); /* border-white/20 */
            box-shadow: 0 10px 40px color-mix(in srgb, var(--clr-red-600), transparent 60%); /* shadow-[0_10px_40px_rgba(220,38,38,0.4)] */
            transition: all 0.3s ease;
            cursor: pointer;
            animation: bounce 1s infinite;

            &:hover {
                background-color: color-mix(in srgb, var(--clr-red-600), var(--color-white) 15%); /* hover:bg-red-500 approx */
                animation: none;
            }
        }

        & .floating-cta__icon {
            flex-shrink: 0;
        }
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(-25%);
        animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
        transform: translateY(0);
        animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
}