/* Spinner + label inside a working button — see js/loadingButton.js. */

.eg-loading {
    cursor: progress;
}

.eg-loading > span {
    vertical-align: middle;
}

.eg-loading-spin {
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: 0.6em;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    box-sizing: border-box;
    animation: eg-loading-rotate 0.7s linear infinite;
}

@supports (color: color-mix(in srgb, red 50%, transparent)) {
    .eg-loading-spin {
        border-color: color-mix(in srgb, currentColor 30%, transparent);
        border-top-color: currentColor;
    }
}

@keyframes eg-loading-rotate {
    to {
        transform: rotate(360deg);
    }
}

/* The spinner is the only sign of progress, so it keeps turning, just slower. */
@media (prefers-reduced-motion: reduce) {
    .eg-loading-spin {
        animation-duration: 1.6s;
    }
}

/* Press feedback: a quick shrink on click. The individual `scale` property leaves any transform a
   button's own styles set alone. */
[data-loading-buttons] :is(a, button, input[type="submit"]),
a[data-loading-nav] {
    transition: scale 0.1s ease;
}

[data-loading-buttons] :is(a, button, input[type="submit"]):active:not(.eg-loading-other),
a[data-loading-nav]:active {
    scale: 0.97;
}

@media (prefers-reduced-motion: reduce) {
    [data-loading-buttons] :is(a, button, input[type="submit"]):active,
    a[data-loading-nav]:active {
        scale: none;
    }
}

.eg-loading-other {
    opacity: 0.45;
    cursor: not-allowed;
}

/* Keeps the button row on screen while the step's script hides it to show the loader. */
.eg-loading-pinned {
    display: block !important;
}

/* The loader's own spinner is only for work started without a visible button row. */
.eg-loading-attached .eg-loader-fallback {
    display: none;
}

.eg-loader-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 0;
    color: #333333;
}

.eg-loading-note {
    margin: 12px 0 0;
    text-align: center;
    font-size: 13px;
    color: #555555;
}

.eg-loading-live {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}