/* inkPad / Spacer — token heights, no layout side-effects */

.inkpad-scope .inkpad-spacer,
.editor-styles-wrapper .inkpad-spacer {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: none;
}

.inkpad-scope .inkpad-spacer--none {
	height: 0;
	overflow: hidden;
}

/* Editor: show a thin preview when size is none (SSR stays height 0) */
.editor-styles-wrapper .inkpad-spacer--none {
	height: auto;
}

.inkpad-scope .inkpad-spacer--sm,
.editor-styles-wrapper .inkpad-spacer--sm {
	height: var(--inkpad-space-sm);
}

.inkpad-scope .inkpad-spacer--md,
.editor-styles-wrapper .inkpad-spacer--md {
	height: var(--inkpad-space-md);
}

.inkpad-scope .inkpad-spacer--lg,
.editor-styles-wrapper .inkpad-spacer--lg {
	height: var(--inkpad-space-lg);
}

.inkpad-scope .inkpad-spacer--xl,
.editor-styles-wrapper .inkpad-spacer--xl {
	height: calc(var(--inkpad-space-lg) * 2);
}

/* Editor preview only */
.editor-styles-wrapper .inkpad-spacer__preview {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--inkpad-space-md);
	height: 100%;
	background: color-mix(in srgb, var(--inkpad-surface) 88%, var(--inkpad-text));
	border: 1px dashed color-mix(in srgb, var(--inkpad-text) 22%, transparent);
	border-radius: var(--inkpad-radius-sm, var(--inkpad-radius));
}

.editor-styles-wrapper .inkpad-spacer--none .inkpad-spacer__preview {
	min-height: var(--inkpad-space-xs);
	height: var(--inkpad-space-xs);
}