/*
* Two things to know about styling altcha 3.x from a stylesheet:
*
* 1. The widget injects its own styles into at runtime, so they always come
* after this file. Custom properties therefore go on the widget element instead
* of on :root, where the widget's own :root defaults would win.
* 2. Those styles contain ".altcha * { all: revert-layer }", which resets every
* property this file sets on an element inside the widget. Own rules need at
* least that specificity, hence the ".altcha " prefix everywhere below.
*/
altcha-widget {
--altcha-border-radius: 5px;
/* --altcha-border-width: 1px; */
--altcha-color-base: #FAFAFA;
--altcha-border-color: rgba(204, 204, 204, 0.5);
/* --altcha-checkbox-border-color: currentColor; */
/* --altcha-color-base-content: currentColor; */
/* --altcha-color-error: #f23939; */
--altcha-max-width: 280px;
--altcha-color-success: currentColor;
--altcha-color-success-content: var(--altcha-color-base);
}
.altcha .altcha-main {
position: relative;
/* Right side leaves room for the shield below */
padding: 1rem 3.5rem 1rem 1.5rem;
gap: 1rem;
}
.altcha .altcha-main::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 23px;
height: 25px;
background-color: currentColor;
-webkit-mask: url('data:image/svg+xml,') no-repeat center / contain;
mask: url('data:image/svg+xml,') no-repeat center / contain;
}