/* Printer script disconnected: animated warnings on the status badge and page background. */

@keyframes tablet-printer-stale-bg {
    0%, 100% {
        background-color: var(--sa-bg);
    }
    50% {
        background-color: #fae8a8;
    }
}

@keyframes tablet-printer-stale-badge {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(202, 138, 4, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 14px 4px rgba(202, 138, 4, 0.55);
        transform: scale(1.06);
    }
}

@keyframes tablet-printer-stale-icon {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-14deg) scale(1.1);
    }
    30% {
        transform: rotate(14deg) scale(1.1);
    }
    45% {
        transform: rotate(-10deg) scale(1.05);
    }
    60% {
        transform: rotate(10deg) scale(1.05);
    }
    75% {
        transform: rotate(-5deg) scale(1);
    }
}

body.tablet-app.printer-script-stale {
    animation: tablet-printer-stale-bg 2.4s ease-in-out infinite;
}

.printer-poll-status.is-warn {
    animation: tablet-printer-stale-badge 1.4s ease-in-out infinite;
}

.printer-poll-status.is-warn i {
    display: inline-block;
    transform-origin: center center;
    animation: tablet-printer-stale-icon 1.1s ease-in-out infinite;
}

@keyframes tablet-printer-paused-bg {
    0%, 100% {
        background-color: var(--sa-bg);
    }
    50% {
        background-color: #b8ddf5;
    }
}

@keyframes tablet-printer-paused-badge {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.45);
        transform: scale(1);
    }
    50% {
        box-shadow: 0 0 14px 4px rgba(2, 132, 199, 0.55);
        transform: scale(1.06);
    }
}

@keyframes tablet-printer-paused-icon {
    0%, 100% {
        transform: rotate(0deg) scale(1);
    }
    15% {
        transform: rotate(-14deg) scale(1.1);
    }
    30% {
        transform: rotate(14deg) scale(1.1);
    }
    45% {
        transform: rotate(-10deg) scale(1.05);
    }
    60% {
        transform: rotate(10deg) scale(1.05);
    }
    75% {
        transform: rotate(-5deg) scale(1);
    }
}

body.tablet-app.printer-script-paused {
    animation: tablet-printer-paused-bg 2.4s ease-in-out infinite;
}

.printer-poll-status {
    cursor: pointer;
    gap: 6px;
}

.printer-poll-status.is-paused {
    background: var(--sa-info-soft);
    border-color: var(--sa-info);
    color: var(--sa-info);
    animation: tablet-printer-paused-badge 1.4s ease-in-out infinite;
}

.printer-poll-status.is-paused i {
    display: inline-block;
    transform-origin: center center;
    animation: tablet-printer-paused-icon 1.1s ease-in-out infinite;
}

.printer-poll-count {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    min-width: 1ch;
}

@keyframes tablet-printer-paused-stale-bg {
    0%, 45% {
        background-color: #fae8a8;
    }
    55%, 100% {
        background-color: #b8ddf5;
    }
}

@keyframes tablet-printer-paused-stale-badge {
    0%, 45% {
        background: var(--sa-warning-soft);
        border-color: var(--sa-warning);
        color: var(--sa-warning);
        box-shadow: 0 0 14px 4px rgba(202, 138, 4, 0.55);
        transform: scale(1.06);
    }
    55%, 100% {
        background: var(--sa-info-soft);
        border-color: var(--sa-info);
        color: var(--sa-info);
        box-shadow: 0 0 14px 4px rgba(2, 132, 199, 0.55);
        transform: scale(1.06);
    }
}

@keyframes tablet-printer-paused-stale-icon {
    0%, 45% {
        transform: rotate(-10deg) scale(1.08);
    }
    55%, 100% {
        transform: rotate(10deg) scale(1.08);
    }
}

body.tablet-app.printer-script-paused-stale {
    animation: tablet-printer-paused-stale-bg 2.8s ease-in-out infinite;
}

.printer-poll-status.is-paused-stale {
    animation: tablet-printer-paused-stale-badge 2.8s ease-in-out infinite;
}

.printer-poll-status.is-paused-stale i {
    display: inline-block;
    transform-origin: center center;
    animation: tablet-printer-paused-stale-icon 2.8s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    body.tablet-app.printer-script-stale,
    .printer-poll-status.is-warn,
    .printer-poll-status.is-warn i {
        animation: none;
    }

    body.tablet-app.printer-script-stale {
        background-color: var(--sa-warning-soft);
    }

    body.tablet-app.printer-script-paused,
    .printer-poll-status.is-paused,
    .printer-poll-status.is-paused i {
        animation: none;
    }

    body.tablet-app.printer-script-paused {
        background-color: var(--sa-info-soft);
    }

    body.tablet-app.printer-script-paused-stale,
    .printer-poll-status.is-paused-stale,
    .printer-poll-status.is-paused-stale i {
        animation: none;
    }

    body.tablet-app.printer-script-paused-stale {
        background: linear-gradient(135deg, var(--sa-warning-soft) 50%, var(--sa-info-soft) 50%);
    }

    .printer-poll-status.is-paused-stale {
        background: var(--sa-warning-soft);
        border-color: var(--sa-warning);
        color: var(--sa-warning);
    }
}