.form-element {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.form-element.form-element-fieldset legend {
    --font-family: inherit;
    --font-size: var(--root-heading-2-size);
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: inherit;
}

.form-element .form-text {
    --color-text: dimgrey;
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: italic;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
}

.form-element .required {
    --font-family: inherit;
    --font-size: 1em;
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: inherit;
}

.form-element.is-invalid {
    --color-border: var(--root-color--red);
}

.form-element .invalid-feedback {
    --color-text: var(--root-color--red);
    --font-family: inherit;
    --font-size: 1em; /* Mobile 16px / > Mobile 18px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--bold);
    --line-height: inherit;
}

.form-element-summary .summary-header {
    --font-family: inherit;
    --font-size: 1.3em;
    --font-style: normal;
    --font-weight: bold;
    --line-height: inherit;
}

.form-element-summary .summary-row {
    --color-border: #ccc;
}

.form-element-summary .summary-label {
    --font-family: inherit;
    --font-size: 1em;
    --font-style: normal;
    --font-weight: bold;
    --line-height: inherit;
}

.form-element-summary .summary-value {
    --font-family: inherit;
    --font-size: 1em;
    --font-style: normal;
    --font-weight: normal;
    --line-height: inherit;
}

.form-navigation {
    --font-size: var(--root-font-size); /* Reset, use REM */
}

.form-navigation .btn {
    --background-color: var(--root-color--primary);
    --border-radius: 999rem;

    --border-top-width: var(--root-border-width);
    --border-right-width: var(--root-border-width);
    --border-bottom-width: var(--root-border-width);
    --border-left-width: var(--root-border-width);

    --border-top-style: solid;
    --border-right-style: solid;
    --border-bottom-style: solid;
    --border-left-style: solid;

    --border-top-color: var(--root-color--primary);
    --border-right-color: var(--root-color--primary);
    --border-bottom-color: var(--root-color--primary);
    --border-left-color: var(--root-color--primary);

    --color: var(--root-color--white);
    --font-family: inherit;
    --font-size: 0.937rem; /* Always 15px */
    --font-style: normal;
    --font-weight: var(--root-font-weight--normal);
    --line-height: inherit;
    --height: 3rem; /* Keep the same height as regular buttons */
}

.form-navigation .btn:active,
.form-navigation .btn:focus,
.form-navigation .btn:hover {
    --background-color: var(--root-color--primary-dark);
    --border-top-color: var(--root-color--primary-dark);
    --border-right-color: var(--root-color--primary-dark);
    --border-bottom-color: var(--root-color--primary-dark);
    --border-left-color: var(--root-color--primary-dark);
}

.form-navigation .btn:disabled {
    --background-color: #f2f2f2;
    --border-top-color: #f2f2f2;
    --border-right-color: #f2f2f2;
    --border-bottom-color: #f2f2f2;
    --border-left-color: #f2f2f2;
    --color: #c2c5c7;
}