/*
 * Styling for the refresh control only.
 *
 * Colours come from `currentColor` so the button borrows the surrounding text
 * colour instead of imposing a palette: it looks deliberate on a light theme
 * and on a dark one without knowing which it is in. Everything is scoped to
 * the classes below, so nothing here can leak into the rest of a form.
 */

.captcha-frame {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.captcha-frame img {
    display: block;
    border-radius: 6px;
}

.captcha-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: 0.55;
    cursor: pointer;
    transition: opacity 0.15s ease;
}

.captcha-refresh:hover,
.captcha-refresh:focus-visible {
    opacity: 1;
}

.captcha-refresh:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.captcha-refresh[aria-busy="true"] {
    cursor: progress;
    animation: captcha-spin 0.8s linear infinite;
}

@keyframes captcha-spin {
    to {
        transform: rotate(360deg);
    }
}

/* The announcement is for screen readers; it must not add visual clutter. */
.captcha-status {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .captcha-refresh {
        transition: none;
    }

    .captcha-refresh[aria-busy="true"] {
        animation: none;
        opacity: 0.35;
    }
}