/* ==========================================================================
   MTC Design Library - Preview Blocks
   Live component previews with Preview/Code toggle and Copy functionality.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preview Block Container
   -------------------------------------------------------------------------- */
.preview-block {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	background-color: var(--card);
	margin-bottom: 1.5rem;
}

/* --------------------------------------------------------------------------
   Toolbar
   -------------------------------------------------------------------------- */
.preview-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--border);
	background-color: var(--muted);
	min-height: 2.5rem;
}

.preview-toolbar-title {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--foreground);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.preview-toolbar-actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	flex-shrink: 0;
}

/* Toggle buttons (Preview / Code) */
.preview-toggle-group {
	display: flex;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	overflow: hidden;
}

.preview-toggle-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.25rem 0.625rem;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: var(--font-body);
	color: var(--muted-foreground);
	background: none;
	border: none;
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease;
	white-space: nowrap;
}

.preview-toggle-btn:hover {
	color: var(--foreground);
}

.preview-toggle-btn.active {
	background-color: var(--background);
	color: var(--foreground);
}

.preview-toggle-btn svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* Copy button */
.preview-copy-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.25rem 0.5rem;
	font-size: 0.75rem;
	font-weight: 500;
	font-family: var(--font-body);
	color: var(--muted-foreground);
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	cursor: pointer;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease;
	white-space: nowrap;
}

.preview-copy-btn:hover {
	color: var(--foreground);
	background-color: var(--background);
	border-color: var(--foreground);
}

.preview-copy-btn.copied {
	color: oklch(0.65 0.2 145);
	border-color: oklch(0.65 0.2 145);
}

.preview-copy-btn svg {
	width: 0.8125rem;
	height: 0.8125rem;
}

/* --------------------------------------------------------------------------
   Preview Canvas
   -------------------------------------------------------------------------- */
.preview-canvas {
	padding: 2rem 1.5rem;
	min-height: 5rem;
	position: relative;

	/* Subtle dot grid background */
	background-image: radial-gradient(
		circle,
		var(--border) 0.75px,
		transparent 0.75px
	);
	background-size: 16px 16px;
	background-position: 8px 8px;
}

/* Variants */
.preview-canvas.flush {
	padding: 0;
}

.preview-canvas.centered {
	display: flex;
	align-items: center;
	justify-content: center;
}

.preview-canvas.dark-bg {
	background-color: var(--foreground);
	color: var(--background);
	background-image: radial-gradient(
		circle,
		oklch(1 0 0 / 6%) 0.75px,
		transparent 0.75px
	);
}

/* --------------------------------------------------------------------------
   Code Block
   -------------------------------------------------------------------------- */
.preview-code {
	display: none;
	overflow-x: auto;
	background-color: var(--secondary);
	border-top: 1px solid var(--border);
	scrollbar-width: thin;
	scrollbar-color: var(--muted-foreground) transparent;
}

.preview-code::-webkit-scrollbar {
	height: 6px;
}

.preview-code::-webkit-scrollbar-thumb {
	background-color: var(--muted-foreground);
	border-radius: 9999px;
}

.preview-code::-webkit-scrollbar-track {
	background: transparent;
}

.preview-code.visible {
	display: block;
}

.preview-code pre {
	margin: 0;
	padding: 1rem 1.25rem;
	font-family: var(--font-mono);
	font-size: 0.8125rem;
	line-height: 1.7;
	color: var(--foreground);
	white-space: pre;
	tab-size: 2;
}

.preview-code code {
	font-family: inherit;
}

/* Syntax highlighting tokens */
.preview-code .token-tag {
	color: oklch(0.7 0.15 25);
}

.preview-code .token-attr-name {
	color: oklch(0.7 0.15 85);
}

.preview-code .token-attr-value {
	color: oklch(0.65 0.15 145);
}

.preview-code .token-comment {
	color: var(--muted-foreground);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   State: Code visible, Canvas hidden
   -------------------------------------------------------------------------- */
.preview-block.show-code .preview-canvas {
	display: none;
}

.preview-block.show-code .preview-code {
	display: block;
	border-top: none;
}

/* --------------------------------------------------------------------------
   Inline Code (for use in documentation text)
   -------------------------------------------------------------------------- */
.dl-inline-code {
	font-family: var(--font-mono);
	font-size: 0.8125em;
	padding: 0.15em 0.4em;
	background-color: var(--muted);
	border-radius: var(--radius-sm);
	color: var(--foreground);
}