/* /Components/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-qaiz0ibte4],
.components-reconnect-repeated-attempt-visible[b-qaiz0ibte4],
.components-reconnect-failed-visible[b-qaiz0ibte4],
.components-pause-visible[b-qaiz0ibte4],
.components-resume-failed-visible[b-qaiz0ibte4]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-retrying[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-failed[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-qaiz0ibte4]
{
    display: block;
}

#components-reconnect-modal[b-qaiz0ibte4]
{
    color-scheme: light;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-family: var(--mud-typography-default-family);
    box-sizing: border-box;
    width: min(30rem, calc(100vw - 2rem));
    max-width: none;
    max-height: calc(100dvh - 2rem);
    margin: auto;
    overflow-y: auto;
    padding: 2rem;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    outline: none;
    box-shadow: 0 16px 40px -12px rgba(31, 41, 55, 0.2);
    opacity: 0;
    transition: opacity 0.5s, display 0.5s;
    transition-behavior: allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-qaiz0ibte4 0.5s both;

    &[open]
    {
        animation: components-reconnect-modal-slideUp-b-qaiz0ibte4 0.3s ease-out, components-reconnect-modal-fadeInOpacity-b-qaiz0ibte4 0.3s ease-out;
        animation-fill-mode: both;
    }
}

    #components-reconnect-modal[b-qaiz0ibte4]::backdrop
    {
        background-color: rgba(31, 41, 55, 0.25);
        animation: components-reconnect-modal-fadeInOpacity-b-qaiz0ibte4 0.5s ease-in-out;
        opacity: 1;
    }

@keyframes components-reconnect-modal-slideUp-b-qaiz0ibte4
{
    0%
    {
        transform: translateY(30px) scale(0.95);
    }

    100%
    {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-qaiz0ibte4
{
    0%
    {
        opacity: 0;
    }

    100%
    {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-qaiz0ibte4
{
    0%
    {
        opacity: 1;
    }

    100%
    {
        opacity: 0;
    }
}

.components-reconnect-container[b-qaiz0ibte4]
{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
}

#components-reconnect-modal p[b-qaiz0ibte4]
{
    margin: 0;
    text-align: center;
}

/* Icon container */
.reconnect-icon-container[b-qaiz0ibte4]
{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--mud-palette-primary-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.reconnect-icon[b-qaiz0ibte4],
.reconnect-icon-error[b-qaiz0ibte4],
.reconnect-icon-pause[b-qaiz0ibte4]
{
    width: 48px;
    height: 48px;
    color: var(--mud-palette-primary);
    z-index: 10;
    animation: iconPulse-b-qaiz0ibte4 2s ease-in-out infinite;
}

.reconnect-icon-error[b-qaiz0ibte4],
.reconnect-icon-pause[b-qaiz0ibte4]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon[b-qaiz0ibte4]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon-error[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon-error[b-qaiz0ibte4]
{
    display: block;
    color: var(--mud-palette-error-darken);
    animation: iconShake-b-qaiz0ibte4 0.5s ease-in-out;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-icon[b-qaiz0ibte4]
{
    display: none;
}

#components-reconnect-modal.components-reconnect-paused .reconnect-icon-pause[b-qaiz0ibte4]
{
    display: block;
    color: var(--mud-palette-warning-darken);
    animation: none;
}

@keyframes iconPulse-b-qaiz0ibte4
{
    0%, 100%
    {
        transform: scale(1);
    }

    50%
    {
        transform: scale(1.1);
    }
}

#components-reconnect-modal.components-reconnect-failed .reconnect-icon-container[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-icon-container[b-qaiz0ibte4]
{
    background: var(--mud-palette-error-hover);
}

#components-reconnect-modal.components-reconnect-paused .reconnect-icon-container[b-qaiz0ibte4]
{
    background: var(--mud-palette-warning-hover);
}

@keyframes iconShake-b-qaiz0ibte4
{
    0%, 100%
    {
        transform: translateX(0);
    }

    20%
    {
        transform: translateX(-8px);
    }

    40%
    {
        transform: translateX(8px);
    }

    60%
    {
        transform: translateX(-4px);
    }

    80%
    {
        transform: translateX(4px);
    }
}

/* Pulse rings */
.reconnect-pulse-ring[b-qaiz0ibte4]
{
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-primary);
    opacity: 0;
    animation: pulseRing-b-qaiz0ibte4 2s cubic-bezier(0, 0.5, 0.5, 1) infinite;
}

    .reconnect-pulse-ring.delay-1[b-qaiz0ibte4]
    {
        animation-delay: 0.4s;
    }

    .reconnect-pulse-ring.delay-2[b-qaiz0ibte4]
    {
        animation-delay: 0.8s;
    }

#components-reconnect-modal.components-reconnect-failed .reconnect-pulse-ring[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-resume-failed .reconnect-pulse-ring[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-paused .reconnect-pulse-ring[b-qaiz0ibte4]
{
    animation: none;
    display: none;
}

@keyframes pulseRing-b-qaiz0ibte4
{
    0%
    {
        transform: scale(0.5);
        opacity: 0;
    }

    20%
    {
        opacity: 0.35;
    }

    100%
    {
        transform: scale(1.2);
        opacity: 0;
    }
}

/* Content */
.reconnect-content[b-qaiz0ibte4]
{
    text-align: center;
}

/* Titles */
.reconnect-title[b-qaiz0ibte4]
{
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

    .reconnect-title.error[b-qaiz0ibte4]
    {
        color: var(--mud-palette-error-darken);
    }

    .reconnect-title.warning[b-qaiz0ibte4]
    {
        color: var(--mud-palette-warning-darken);
    }

.reconnect-subtitle[b-qaiz0ibte4]
{
    margin: 0;
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
}

/* Badge */
.countdown-badge[b-qaiz0ibte4]
{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    background: var(--mud-palette-primary-hover);
    color: var(--mud-palette-primary-darken);
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: var(--mud-default-borderradius);
    vertical-align: middle;
}

/* Actions */
.reconnect-actions[b-qaiz0ibte4]
{
    display: none;
    gap: 0.75rem;
    width: 100%;
}

#components-reconnect-modal.components-reconnect-failed .reconnect-actions[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-paused .reconnect-actions[b-qaiz0ibte4]
{
    display: flex;
}

/* Override MudBlazor's built-in #components-reconnect-modal button styles. */
#components-reconnect-modal .btn-primary[b-qaiz0ibte4]
{
    flex: 1;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--mud-default-borderradius);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    background: var(--mud-palette-primary-darken);
    color: var(--mud-palette-primary-text);
}

#components-reconnect-modal.components-reconnect-failed .btn-primary.components-reconnect-failed-visible[b-qaiz0ibte4],
#components-reconnect-modal.components-reconnect-paused .btn-primary.components-pause-visible[b-qaiz0ibte4]
{
    display: inline-flex;
}

#components-reconnect-modal .btn-primary:hover[b-qaiz0ibte4]
{
    background: var(--mud-palette-primary);
}

#components-reconnect-modal .btn-primary:focus-visible[b-qaiz0ibte4]
{
    outline: 2px solid var(--mud-palette-primary-darken);
    outline-offset: 3px;
}

#components-reconnect-modal .btn-primary:active[b-qaiz0ibte4]
{
    background: var(--mud-palette-primary-darken);
}

@media (max-width: 599.98px)
{
    #components-reconnect-modal[b-qaiz0ibte4]
    {
        padding: 1.5rem;
    }

    .components-reconnect-container[b-qaiz0ibte4]
    {
        gap: 1.25rem;
    }

    .reconnect-actions[b-qaiz0ibte4]
    {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce)
{
    #components-reconnect-modal[b-qaiz0ibte4],
    #components-reconnect-modal[open][b-qaiz0ibte4],
    #components-reconnect-modal[b-qaiz0ibte4]::backdrop,
    #components-reconnect-modal .reconnect-icon[b-qaiz0ibte4],
    #components-reconnect-modal .reconnect-icon-error[b-qaiz0ibte4],
    #components-reconnect-modal .reconnect-pulse-ring[b-qaiz0ibte4]
    {
        animation: none;
        transition: none;
    }

    #components-reconnect-modal[open][b-qaiz0ibte4]
    {
        opacity: 1;
    }
}