.wave {
    --palette-background-bold: currentColor;

    @apply align-middle inline-flex items-center leading-[var(--font-content-line-height-nano)]
    pointer-events-none select-none text-[var(--palette-background-bold)] whitespace-nowrap;

    font-size: var(--font-content-size-nano);

    transition: color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);

    &[data-palette] {
        @apply text-[rgb(var(--palette-background-bold))];
    }

    & > span {
        @apply bg-current h-[1em] inline-block w-[1em];

        border-radius: var(--radius-circle);

        animation: wave 1s infinite;

        &:nth-child(2) {
            animation-delay: -0.2s;
        }

        &:nth-child(3) {
            animation-delay: -0.4s;
        }

        &:nth-child(4) {
            animation-delay: -0.6s;
        }

        &:last-child {
            animation-delay: -0.8s;
        }
    }
}