/**
 * Sistema global de formularios.
 *
 * @package Groowleck
 */

.form-field {
	display: grid;
	gap: var(--groowleck-space-2);
}

.form-label,
label {
	color: var(--groowleck-color-text-heading);
	font-size: var(--groowleck-font-size-sm);
	font-weight: var(--groowleck-font-weight-semibold);
}

input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
select,
textarea {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--groowleck-space-3) var(--groowleck-space-4);
	border: var(--groowleck-border-default);
	border-radius: var(--groowleck-radius-md);
	background: var(--groowleck-color-background);
	color: var(--groowleck-color-text-body);
	transition: var(--groowleck-transition-interactive);
}

textarea {
	min-height: 8rem;
}

input::placeholder,
textarea::placeholder {
	color: var(--groowleck-color-text-muted);
	opacity: 0.8;
}

input:focus,
select:focus,
textarea:focus {
	border-color: var(--groowleck-color-accent);
	outline: 0;
	box-shadow: var(--groowleck-shadow-focus);
}

input[aria-invalid="true"],
select[aria-invalid="true"],
textarea[aria-invalid="true"] {
	border-color: var(--groowleck-status-danger);
}

.form-help {
	color: var(--groowleck-color-text-muted);
	font-size: var(--groowleck-font-size-sm);
}

.form-error {
	color: var(--groowleck-status-danger);
	font-size: var(--groowleck-font-size-sm);
}

.form-group {
	display: grid;
	gap: var(--groowleck-space-5);
}

.form-row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--groowleck-space-5);
}

.form-check {
	display: flex;
	align-items: flex-start;
	gap: var(--groowleck-space-2);
}

.form-check input {
	flex: 0 0 auto;
	margin-block-start: 0.25rem;
}

@media (max-width: 42rem) {
	.form-row {
		grid-template-columns: minmax(0, 1fr);
	}
}