/* ==========================================================================
   vx-examples.css

   Shared styling for the two examples pages:
     /examples          → Views/Home/Examples.cshtml
     /examples/styling  → Views/Home/StylingExamples.cshtml

   Contains only rules used by both pages, or by the styling page alone where
   they are examples-specific. Page-layout rules that belong to one page only
   (the .vx-docs sidebar grid, the mobile jump menu) stay in that page's own
   <style> block.

   Loaded from _Layout.cshtml.
   ========================================================================== */


/* ─────────────────────  Tab row  ─────────────────────────────────────────
   Switches between the formula and styling catalogs. Spans the full content
   width, above the page's own layout grid. Scrolls horizontally on narrow
   viewports rather than wrapping, so the tabs never stack.
   ------------------------------------------------------------------------ */
.vx-tabs {
	display: flex;
	gap: 0;
	border-bottom: 1px solid var(--bs-border-color);
	margin-bottom: 1.5rem;
	overflow-x: auto;
	scrollbar-width: none;
}

	.vx-tabs::-webkit-scrollbar {
		display: none;
	}

.vx-tab {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	padding: .6rem 1.05rem;
	font-size: .95rem;
	color: var(--bs-secondary-color);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

	.vx-tab:hover {
		color: var(--bs-primary);
		text-decoration: none;
	}

	.vx-tab.is-active {
		color: var(--bs-primary);
		font-weight: 600;
		border-bottom-color: var(--bs-primary);
	}


/* ─────────────────────  Group pills (styling page)  ──────────────────────
   Groups with no entries yet render as .is-empty — visible but inert, so the
   full taxonomy reads as a roadmap rather than a broken filter.
   ------------------------------------------------------------------------ */
.vx-pill-label {
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bs-secondary-color);
	margin-bottom: .45rem;
}

.vx-pills {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	margin-bottom: 1.25rem;
}

.vx-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .85rem;
	font-size: .88rem;
	line-height: 1.4;
	border-radius: 999px;
	border: 1px solid var(--bs-border-color);
	background: #fff;
	color: var(--bs-body-color);
	text-decoration: none;
}

	.vx-pill:hover {
		border-color: var(--bs-primary);
		color: var(--bs-primary);
		text-decoration: none;
	}

	.vx-pill.is-active {
		background: var(--bs-primary);
		border-color: var(--bs-primary);
		color: #fff;
	}

	.vx-pill.is-empty {
		opacity: .45;
		cursor: default;
		background: transparent;
	}

.vx-pill-count {
	font-size: .78rem;
	opacity: .7;
}


/* ─────────────────────  Example card (styling page)  ─────────────────────
   Binds title, description, code, and pager into one unit so the eye can
   tell where the selectors above end and the example begins.
   ------------------------------------------------------------------------ */
.vx-example-card {
	background: #fff;
	border: 1px solid var(--bs-border-color);
	border-radius: .75rem;
	padding: 1.25rem;
	box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
	.vx-example-card {
		padding: 1.5rem;
	}
}

.vx-flag-badge {
	font-family: var(--bs-font-monospace);
	font-size: .74rem;
}

.vx-card-foot {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px solid var(--bs-border-color);
}


/* ─────────────────────  Code blocks (Prism-themed)  ──────────────────────
   Moved verbatim from Examples.cshtml so both pages share one definition.
   ------------------------------------------------------------------------ */
.vx-code-block {
	position: relative;
	background: #0d1117;
	border: 1px solid #30363d;
	border-radius: .65rem;
	overflow: hidden;
	margin-bottom: 1rem;
}

	.vx-code-block pre[class*="language-"] {
		scrollbar-width: thin;
		scrollbar-color: #ffffff #161b22;
	}

		.vx-code-block pre[class*="language-"]::-webkit-scrollbar {
			width: 10px;
			height: 10px;
		}

		.vx-code-block pre[class*="language-"]::-webkit-scrollbar-track {
			background: #161b22;
		}

		.vx-code-block pre[class*="language-"]::-webkit-scrollbar-thumb {
			background: #ffffff;
			border-radius: 5px;
		}

			.vx-code-block pre[class*="language-"]::-webkit-scrollbar-thumb:hover {
				background: #c9d1d9;
			}

.vx-code-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem .85rem;
	background: #161b22;
	border-bottom: 1px solid #30363d;
}

.vx-code-file {
	color: #8b949e;
	font-size: .78rem;
	font-family: var(--bs-font-monospace);
}

.vx-copy-btn {
	background: transparent;
	border: 1px solid #30363d;
	color: #c9d1d9;
	padding: .15rem .55rem;
	font-size: .72rem;
	border-radius: .35rem;
	cursor: pointer;
	transition: background-color .12s ease, color .12s ease;
	position: relative;
	z-index: 2;
}

	.vx-copy-btn:hover {
		background: #30363d;
		color: #fff;
	}

	.vx-copy-btn.is-copied {
		background: #1f6feb;
		border-color: #1f6feb;
		color: #fff;
	}

.vx-code-block pre[class*="language-"] {
	margin: 0;
	padding: 1rem 1.15rem;
	background: transparent;
	border-radius: 0;
	max-height: 520px;
	overflow: auto;
	white-space: pre;
	word-break: normal;
	tab-size: 4;
	font-size: .9rem;
	line-height: 1.6;
}

	.vx-code-block pre[class*="language-"].line-numbers {
		padding-left: 3.5rem;
	}

.vx-code-block .line-numbers .line-numbers-rows {
	border-right-color: #30363d;
}

.vx-code-block code[class*="language-"] {
	font-family: var(--bs-font-monospace);
	font-size: .9rem;
	line-height: 1.6;
}

/* The example card already supplies bottom spacing on the styling page, so
   the block's own margin would double it. */
.vx-example-card .vx-code-block {
	margin-bottom: 0;
}


/* ─────────────────────  Bottom CTA  ──────────────────────────────────── */
.vx-cta {
	margin-top: 3rem;
}