.nav-liquid-indicator {
    position: absolute;
    top: 6px;
    left: 8px;
    z-index: 1;

    width: 56px;
    height: calc(100% - 12px);

    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;

    background:
        radial-gradient(
            circle at 38% 15%,
            rgba(255, 255, 255, 0.52),
            transparent 43%
        ),
        linear-gradient(
            145deg,
            rgba(72, 224, 194, 0.30),
            rgba(247, 190, 85, 0.20)
        ),
        rgba(255, 255, 255, 0.10);

    box-shadow:
        0 10px 28px rgba(72, 224, 194, 0.14),
        inset 0 1px 0 rgba(255, 255, 255, 0.48),
        inset 0 -1px 0 rgba(255, 255, 255, 0.08);

    backdrop-filter:
        blur(18px)
        saturate(180%)
        brightness(1.08);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(180%)
        brightness(1.08);

    transform: translate3d(0, 0, 0);

    transition:
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1),
        width 320ms cubic-bezier(0.22, 1, 0.36, 1),
        filter 260ms ease;

    pointer-events: none;
    will-change: transform, width;
}

.nav-liquid-indicator.is-moving {
    filter:
        brightness(1.12)
        saturate(1.12);
}