.components-reconnect-first-attempt-visible,
.components-reconnect-repeated-attempt-visible,
.components-reconnect-failed-visible,
.components-pause-visible,
.components-resume-failed-visible,
.components-rejoining-animation {
    display: none;
}

.components-reconnect-show .components-reconnect-first-attempt-visible,
.components-reconnect-show .components-rejoining-animation,
.components-reconnect-paused .components-pause-visible,
.components-reconnect-resume-failed .components-resume-failed-visible,
.components-reconnect-retrying .components-reconnect-repeated-attempt-visible,
.components-reconnect-retrying .components-rejoining-animation,
.components-reconnect-failed .components-reconnect-failed-visible {
    display: unset;
}

.components-reconnect-show.components-reconnect-retrying .components-reconnect-first-attempt-visible {
    display: none !important;
}

.components-rejoining-animation {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div {
        position: absolute;
        border: 3px solid rgba(var(--bs-secondary-rgb));
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2) {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}