:root {
    --captcha-widget-background: rgba(0,0,0,0.025);
    --captcha-widget-border: rgba(0,0,0,0.25);
    --captcha-progress-bar: rgba(0,0,0,0.5);
    --captcha-progress-bar-done: #00C30D;
}

*[data-captcha-progress], *[data-captcha-solved], *[data-captcha-placeholder] { display: none; }
*[data-captcha-progress].visible, *[data-captcha-solved].visible, *[data-captcha-placeholder].visible { display: block; }

.unite-captcha {
    background: var(--captcha-widget-background);
    border: 1px solid var(--captcha-widget-border);
    border-radius: 3px;
    position: relative;
}

.unite-captcha *[data-captcha-placeholder] {
    padding: 5px 8px 6px;
}
.unite-captcha *[data-captcha-progress], .unite-captcha *[data-captcha-solved] {
    padding: 1px 8px 10px;
}

*[data-captcha-progress-bar] {
    transition: all 0.25s ease-out;
    position: absolute;
    content: "";
    display: block;
    width: calc(var(--captcha-progress) - 16px);
    height: 4px;
    border-radius: 2px;
    background: currentColor;
    left: 8px;
    bottom: 5px;
}

*[data-captcha-progress-bar].progress {
    color: var(--captcha-progress-bar);
}

*[data-captcha-progress-bar].done {
    color: var(--captcha-progress-bar-done);
}