*,
*::before,
*::after {
	box-sizing: border-box;
}

.form-field {
	display: flex;
	flex-direction: column;
	gap: var(--g-spacing-xs);
	padding: 0;
	margin: 0;
	border: none;
}

.form-field label,
.form-field slot {
	display: flex;
	flex-direction: column;
	gap: inherit;
}

.form-field--horizontal label {
	flex-direction: row-reverse;
	align-items: center;
	justify-content: flex-end;
	gap: var(--g-spacing-sm);
}

.form-field__label {
	margin: 0;
	padding: 0;

	&:where(legend) {
		margin-bottom: var(--g-spacing-xs);
	}
}

.form-field__help {
	font-size: var(--g-typography-body-sm-font-size);
	opacity: 0.7;
}

.form-field__error {
	margin: 0;
	font-size: var(--g-typography-body-sm-font-size);
	color: var(--g-color-content-utility-error);
}