.formfield {
    width: 100%;
    box-sizing: border-box;
    height: 2rem;
    padding-left: 0.5rem;
    font-size: var(--bodytext-fontsize);
    line-height: var(--bodytext-lineheight);
    font-family: var(--bodytext-fontfamily);
    font-weight: var(--bodytext-fontweight);
    font-variation-settings: var(--bodytext-fontvariationsettings);
    letter-spacing: var(--bodytext-letterspacing);
    color: var(--bodytext-color);
    border: var(--border-width) solid var(--ink-fade-20);
    border-radius: var(--border-radius);
    background-color: var(--portal-formfield-background-color, var(--ink-fade-7));
}

.formfield:hover {
    border-color: var(--ink-fade-50);
}

.formfield:focus,
.formfield:focus-visible {
    outline: var(--outline-width-thick) solid var(--portal-formfield-focus-outline-color, var(--oak));
    outline-offset: calc(var(--outline-width-thick) / -2);
}

.formfield--xl {
    height: 3rem;
    padding-left: 1rem;
    font-size: var(--bodytextxl-fontsize);
    font-weight: var(--bodytextxl-weight-light);
    font-variation-settings: "SERF" 0, "wght" var(--bodytextxl-weight-light);
    letter-spacing: var(--bodytextxl-letterspacing);
    color: var(--ink);
}

.formfield--xl::placeholder {
    color: var(--ink-fade-60);
}