:root {
	--e-space-xs: 6px;
	--e-space-s: 8px;
	--e-space-m: 12px;
	--e-space-l: 16px;

	--e-custom-field-border: 1px solid #e1e1e1;
	--e-custom-field-border-radius: 6px;
}

.etch-cf-metabox {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: var(--e-space-m);
}

.etch-cf-field-wrapper {
	padding: var(--e-space-s);
	border: var(--e-custom-field-border);
	border-radius: var(--e-custom-field-border-radius);

	display: flex;
	flex-direction: column;
	gap: var(--e-space-s);
}

.etch-cf-label {
	display: block;
	font-weight: 600;
	font-size: 13px;
}

.etch-cf-required {
	color: #d63638;
}

.etch-cf-input {
	width: 100%;
	transition: border-color 0.2s ease;

	&:focus {
		border-color: #0073aa;
		box-shadow: 0 0 0 1px #0073aa;
		outline: none;
	}
}

.etch-cf-textarea {
	width: 100%;
	resize: vertical;
	transition: border-color 0.2s ease;

	&:focus {
		border-color: #0073aa;
		box-shadow: 0 0 0 1px #0073aa;
		outline: none;
	}
}

.etch-cf-number {
	width: 100%;
	transition: border-color 0.2s ease;

	&:focus {
		border-color: #0073aa;
		box-shadow: 0 0 0 1px #0073aa;
		outline: none;
	}
}

.etch-cf-checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}

.etch-cf-checkbox {
	max-width: 18px;
	max-height: 18px;
	margin: 0;
}

.etch-cf-checkbox-label {
	cursor: pointer;
}
