/* States set by js/request-guard-r1.js while a search or download is pending */

/* the other controls that would send a guarded request */
.request-guard-locked {
    opacity: 0.45;
    pointer-events: none;
}

/* the clicked control, and a download waiting in the queue: their own icons make room for the guard's */
.request-guard-trigger,
.request-guard-queued {
    cursor: progress;
}
.request-guard-trigger > i:not(.request-guard-status),
.request-guard-queued > i:not(.request-guard-status),
.request-guard-trigger.button-download:after,
.request-guard-queued.button-download:after {
    display: none;
}
.request-guard-status {
    margin-right: 0.4em;
}

/* the running or a waiting download: on hover its spinner or clock turns into an X, a click cancels it */
.request-guard-droppable:hover {
    cursor: pointer;
}
.request-guard-droppable:hover > .request-guard-status {
    animation: none;
}
.request-guard-droppable:hover > .request-guard-status:before {
    content: "\f00d"; /* fa-times */
}

/* shown when the request takes longer than usual (offers to cancel it) or a download failed */
.request-guard-hints {
    position: fixed;
    left: 1em;
    right: 1em;
    bottom: 1.5em;
    z-index: 9001; /* above the cookie bar */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5em;
    pointer-events: none;
}
.request-guard-hint {
    display: flex;
    align-items: center;
    gap: 0.9em;
    padding: 0.55em 0.55em 0.55em 1em;
    background-color: #4a4a4a;
    color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    line-height: 1.4;
    pointer-events: auto;
}
.request-guard-hint button {
    flex: 0 0 auto;
    width: auto;
    margin: 0;
    padding: 0.3em 0.9em;
    font-size: 13px;
}

/* the status line keeps its size while its text changes (MB, queue), so its button stays in place */
.request-guard-waiting {
    box-sizing: border-box;
    width: 44em;
    max-width: 100%;
    min-height: 3.9em; /* two lines of text */
}
.request-guard-waiting > span {
    flex: 1 1 auto;
    font-variant-numeric: tabular-nums;
}
.request-guard-waiting button {
    min-width: 9.5em; /* "Alle abbrechen" */
}