/* Recovery overlay variables */
:root {
    --recovery-time-text: "15";
    --recovery-time-seconds: 15s;
    --recovery-color-primary: #2196f3;
}

.theme--dark {
    --recovery-color-bg: #0e0e10;
    --recovery-color-bg-on: #ffffff;
}
.theme--light {
    --recovery-color-bg: #f8f8f8;
    --recovery-color-bg-on: #0e0e10;
}

/* Recovery overlay layout */
.recovery-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;

    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;

    padding: 60px 100px;
    margin: 0;

    font-family: Roboto, system-ui, sans-serif;
    font-size: 34px;
    color: var(--recovery-color-bg-on);
    background-color: var(--recovery-color-bg);
}

.recovery-overlay * {
    pointer-events: none;
}

.recovery-overlay .recovery-logo {
    margin: auto;
    max-width: 900px;
    animation: recovery-pulse 2s linear infinite;
}

.recovery-overlay .recovery-message {
    font-size: 34px;
    text-align: center;
    margin-bottom: 60px;
    opacity: 0;
}

.recovery-overlay .recovery-progress {
    text-align: center;
    margin-top: 60px;
    opacity: 0;
}

.recovery-overlay .recovery-timer-text {
    font-size: 34px;
    text-align: center;
    margin-bottom: 10px;
}
.recovery-overlay .recovery-timer-text .recovery-time-value::before {
    content: var(--recovery-time-text);
}

.recovery-overlay .recovery-bar {
    position: relative;
    width: 200px;
    height: 4px;
    margin: 0 auto;

    background: color-mix(in oklab, var(--recovery-color-primary) 20%, transparent);
}
.recovery-overlay .recovery-bar .recovery-bar-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 0;

    background-color: var(--recovery-color-primary);
}

.recovery-overlay.is-retrying .recovery-message,
.recovery-overlay.is-retrying .recovery-progress {
    opacity: 1;
}

.recovery-overlay.is-retrying .recovery-bar .recovery-bar-fill {
    animation: recovery-bar-fill var(--recovery-time-seconds) linear forwards;
}

/* Utility classes */
.is-hidden {
    display: none;
}

/* Animations */
@keyframes recovery-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

@keyframes recovery-bar-fill {
    0% { width: 0; }
    100% { width: 100%; }
}