@layer theme, base, components, utilities;
@layer components {
:where(.cap-captcha-floating-trigger) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding:
var(--cap-captcha-padding-y, var(--gf-ctrl-btn-padding-y, 0.6em))
var(--cap-captcha-padding-x, var(--gf-ctrl-btn-padding-x, 1.2em));
border: var(--cap-captcha-border, 1px solid var(--gf-ctrl-border-color, currentColor));
border-radius: var(--cap-captcha-radius, var(--gf-ctrl-btn-radius, var(--gf-radius, 0.25em)));
background-color: var(--cap-captcha-bg, transparent);
color: var(--cap-captcha-color, inherit);
font-family: var(--cap-captcha-font-family, var(--gf-ctrl-btn-font-family, inherit));
font-size: var(--cap-captcha-font-size, var(--gf-ctrl-btn-font-size, inherit));
line-height: var(--cap-captcha-line-height, var(--gf-ctrl-btn-line-height, 1.2));
box-shadow: var(--cap-captcha-shadow, none);
cursor: pointer;
text-decoration: none;
transition: var(
--cap-captcha-transition,
var(--gf-transition-ctrl, background-color 120ms ease, color 120ms ease, border-color 120ms ease)
);
&:hover,
&:focus-visible {
background-color: var(--cap-captcha-bg-hover, color-mix(in srgb, currentColor 8%, transparent));
color: var(--cap-captcha-color-hover, inherit);
border-color: var(--cap-captcha-border-color-hover, var(--gf-ctrl-border-color-hover, currentColor));
}
&:focus-visible {
outline: 2px solid var(--cap-captcha-focus-ring, var(--gf-color-primary, currentColor));
outline-offset: 2px;
}
&[disabled] {
opacity: 0.6;
cursor: default;
pointer-events: none;
} &[data-cap-progress="done"] {
display: none;
}
} :where(.gform-theme--framework) { --cap-font: var(--gf-font-family-base, 0);
--cap-color: var(--gf-ctrl-color);
--cap-background: var(--gf-ctrl-bg-color);
--cap-border-color: var(--gf-ctrl-border-color);
--cap-border-radius: var(--gf-ctrl-radius);
--cap-widget-height: var(--gf-ctrl-size);
--cap-widget-padding: var(--gf-ctrl-padding-x);
--cap-checkbox-size: var(--gf-ctrl-choice-size);
--cap-checkbox-border: var(--gf-ctrl-border-width) var(--gf-ctrl-border-style) var(--gf-ctrl-border-color);
--cap-checkbox-border-radius: var(--gf-ctrl-checkbox-check-radius);
--cap-checkbox-background: var(--gf-ctrl-bg-color);
--cap-focus-ring: var(--gf-ctrl-outline-color-focus);
--cap-spinner-color: var(--gf-color-primary);
--cap-spinner-background-color: var(--gf-ctrl-border-color);
--cap-invalid-border-color: var(--gf-ctrl-border-color-error);
}
}  :where(.login) .cap-captcha:not(:last-child) {
margin-block-end: 1rem;
}
body.login .cap-captcha--floating {
clear: both;
margin: 1em 0;
text-align: center;
}
body.login .cap-captcha-floating-trigger {
float: none;
width: 100%;
} body.login .cap-captcha-floating-trigger[data-cap-progress="done"] {
display: none;
}