/* ========================================
   @conduction/nextcloud-vue — Form widgets
   ======================================== */

/*
 * The shared look of a form-shaped dashboard widget — the `CnFormWidgetBase`
 * primitive that CnInteractionFormWidget and every future form widget render.
 *
 * These rules are LIFTED VERBATIM from CnInteractionFormWidget's own scoped
 * block, value for value. That widget's rendering is the reference: it is
 * liked as it stands, and the extraction onto a shared base was required to
 * change nothing a user can see. Keeping the numbers identical is what makes
 * that true, and `e2e/interaction-form-widget.e2e.js` screenshots the widget
 * to prove it.
 *
 * Unscoped on purpose: the markup now lives in CnFormWidgetBase, so a scoped
 * block in the host widget would no longer match its own elements.
 */

.cn-form-widget {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.cn-form-widget__field {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.cn-form-widget__label {
	font-weight: 500;
	font-size: 0.9em;
}

.cn-form-widget__textarea {
	width: 100%;
	min-height: 80px;
	padding: 8px;
	border: 1px solid var(--color-border);
	border-radius: var(--border-radius);
	background: var(--color-main-background);
	color: var(--color-main-text);
	font: inherit;
	resize: vertical;
}

.cn-form-widget__actions {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
}

.cn-form-widget__error {
	color: var(--color-error);
	margin: 0;
}