.addons-fields {
--addons-gap: clamp(0.6rem, 1.2vw, 0.9rem);
--addons-radius: 10px;
--addons-border: color-mix(in srgb, currentColor 14%, transparent);
--addons-surface: color-mix(in srgb, currentColor 3%, transparent); --addons-ink: var(--wp--preset--color--primary, #4b3f9e);
--addons-accent: var(--addons-ink);
--addons-muted: color-mix(in srgb, currentColor 65%, transparent);
--addons-focus: color-mix(in srgb, var(--addons-accent) 38%, transparent);
margin-block: 0 1.5em;
display: flex;
flex-direction: column;
gap: var(--addons-gap);
}
.addons-fields--card {
padding: clamp(0.9rem, 2.5vw, 1.25rem);
border: 1px solid var(--addons-border);
border-radius: var(--addons-radius);
background: var(--addons-surface);
}
.addons-fields__title {
font-weight: 600;
font-size: 1.02em;
margin-block: 0;
line-height: 1.3; padding-inline-start: 0.7em;
position: relative;
}
.addons-fields__title::before {
content: "";
position: absolute;
inset-inline-start: 0;
inset-block: 0.18em;
inline-size: 3px;
border-radius: 3px;
background: var(--addons-ink);
}
.addons-field {
display: flex;
flex-direction: column;
gap: 0.3em;
margin-block: 0; position: relative;
}
.addons-field > label {
font-weight: 500;
line-height: 1.35;
}
.addons-field--checkbox > label,
.addons-field__choices > label {
flex-direction: row;
align-items: flex-start;
gap: 0.55em;
font-weight: 400;
cursor: pointer;
}
.addons-field__choices {
display: flex;
flex-direction: column;
gap: 0.35em;
margin: 0;
padding: 0;
border: 0;
min-inline-size: 0;
}
.addons-field__choices > legend {
font-weight: 500;
line-height: 1.35;
padding: 0;
margin-block-end: 0.3em;
}
.addons-field__choices > label {
display: flex;
}
.addons-field--checkbox input[type="checkbox"],
.addons-field__choices input[type="radio"] {
margin-block-start: 0.15em;
flex: 0 0 auto;
}
.addons-field__price {
color: var(--addons-muted);
font-variant-numeric: tabular-nums;
margin-inline-start: 0.25em;
}
.addons-field .required {
color: #d63638;
text-decoration: none;
margin-inline-start: 0.15em;
}
.addons-field .input-text,
.addons-field select {
inline-size: 100%;
max-inline-size: 100%;
padding: 0.5em 0.65em;
border: 1px solid var(--addons-border);
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit; min-block-size: 2.6em;
box-sizing: border-box;
}
.addons-field .input-text:focus-visible,
.addons-field select:focus-visible,
.addons-field--checkbox input:focus-visible,
.addons-field__choices input:focus-visible {
outline: 2px solid var(--addons-accent);
outline-offset: 2px;
border-color: var(--addons-accent);
}
@media (prefers-reduced-motion: no-preference) {
.addons-field .input-text,
.addons-field select {
transition: border-color 150ms ease, box-shadow 150ms ease;
}
.addons-field .input-text:focus-visible,
.addons-field select:focus-visible {
box-shadow: 0 0 0 3px var(--addons-focus);
}
} .addons-field .input-text,
.addons-field--select select {
position: relative;
z-index: 1;
}
.addons-field--text::after,
.addons-field--textarea::after,
.addons-field--number::after,
.addons-field--date::after,
.addons-field--select::after {
content: "";
position: absolute;
inset-inline: 0.05em 0.05em;
block-size: 2px; inset-block-end: -2px;
border-radius: 2px;
background: linear-gradient(
90deg,
var(--addons-ink),
color-mix(in srgb, var(--addons-ink) 55%, transparent)
);
transform: scaleX(0);
transform-origin: left center;
opacity: 0;
pointer-events: none;
}
.addons-field--inscribed::after {
transform: scaleX(1);
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.addons-field--text::after,
.addons-field--textarea::after,
.addons-field--number::after,
.addons-field--date::after,
.addons-field--select::after {
transition: transform 360ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 200ms ease;
}
} .addons-field--checkbox input[type="checkbox"],
.addons-field__choices input[type="radio"] {
accent-color: var(--addons-ink);
}
@media (prefers-color-scheme: dark) {
.addons-fields {
--addons-border: color-mix(in srgb, currentColor 22%, transparent);
--addons-surface: color-mix(in srgb, currentColor 6%, transparent); --addons-ink: var(--wp--preset--color--primary, #9d92f0);
}
.addons-field .required {
color: #ff6b6e;
}
}