:host,
ak-stage-captcha.style-scope {
    --captcha-background-to: var(--pf-global--BackgroundColor--light-100);
    --captcha-background-from: var(--pf-global--BackgroundColor--light-300);
}

:host([theme="dark"]),
ak-stage-captcha[theme="dark"].style-scope {
    --captcha-background-to: var(--ak-dark-background-light);
    --captcha-background-from: var(--pf-global--BackgroundColor--300);
}

@keyframes captcha-background-animation {
    0% {
        background-color: var(--captcha-background-from);
    }
    50% {
        background-color: var(--captcha-background-to);
    }
    100% {
        background-color: var(--captcha-background-from);
    }
}

.ak-interactive-challenge {
    /**
     * We use & here to hint to the ShadyDOM polyfill that this rule is meant
     * for the iframe itself, not the contents of the iframe.
     */
    & {
        width: 100%;
        min-height: 65px;
    }

    &[data-ready="loading"] {
        background-color: var(--captcha-background-from);
        animation: captcha-background-animation 1s infinite var(--pf-global--TimingFunction);
    }
}
