/**
 * Form foundations. Class-based so WooCommerce checkout markup is not rewritten.
 */

.mavi-field {
	display: flex;
	flex-direction: column;
	gap: var(--mavi-space-xs);
	margin-block: 0 var(--mavi-space-md);
}

.mavi-label {
	color: var(--mavi-color-text);
	font-size: var(--mavi-font-size-small);
	font-weight: var(--mavi-font-weight-semibold);
}

.mavi-input,
.mavi-select,
.mavi-textarea {
	appearance: none;
	background: var(--mavi-color-surface);
	border: 1px solid var(--mavi-color-border);
	border-radius: var(--mavi-radius-md);
	color: var(--mavi-color-text);
	font-family: inherit;
	font-size: var(--mavi-font-size-body);
	line-height: var(--mavi-line-height-tight);
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	width: 100%;
}

.mavi-input,
.mavi-select {
	min-height: var(--mavi-control-height);
}

.mavi-textarea {
	min-height: 8rem;
	resize: vertical;
}

.mavi-select {
	background-image: linear-gradient(45deg, transparent 50%, var(--mavi-color-text) 50%), linear-gradient(135deg, var(--mavi-color-text) 50%, transparent 50%);
	background-position: calc(100% - 1.1rem) 55%, calc(100% - 0.75rem) 55%;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	padding-inline-end: 2rem;
}

.mavi-field__help {
	color: var(--mavi-color-muted);
	font-size: var(--mavi-font-size-small);
}

.mavi-field__error {
	color: var(--mavi-color-error);
	font-size: var(--mavi-font-size-small);
	font-weight: var(--mavi-font-weight-semibold);
}

.mavi-field.is-invalid .mavi-input,
.mavi-field.is-invalid .mavi-select,
.mavi-field.is-invalid .mavi-textarea,
.mavi-input[aria-invalid="true"],
.mavi-select[aria-invalid="true"],
.mavi-textarea[aria-invalid="true"] {
	border-color: var(--mavi-color-error);
	background-color: var(--mavi-color-error-bg);
}

.mavi-choice {
	align-items: flex-start;
	display: flex;
	gap: var(--mavi-space-sm);
}

.mavi-choice input {
	accent-color: var(--mavi-color-accent);
	block-size: 1.125rem;
	flex: 0 0 auto;
	inline-size: 1.125rem;
	margin-top: 0.2rem;
}

.mavi-choice span {
	line-height: var(--mavi-line-height-tight);
}