/**
 * Styleguide page styles.
 *
 * Deliberately NOT in assets/css/components/ -- the enqueue manifest globs that
 * directory and would ship these rules on every page of the site. This file is
 * loaded only for page-templates/styleguide.php.
 *
 * Nothing here is part of the design system. It is chrome for displaying the
 * design system.
 */

.ghc-sg__toc {
	position: sticky;
	inset-block-start: calc(var(--ghc-header-height) + var(--ghc-space-sm));
	align-self: start;
	display: none;
}

@media (min-width: 64rem) {

	.ghc-sg__layout {
		display: grid;
		grid-template-columns: 13rem 1fr;
		gap: var(--ghc-space-2xl);
		align-items: start;
	}

	.ghc-sg__toc {
		display: block;
	}
}

.ghc-sg__toc ul {
	display: grid;
	gap: var(--ghc-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--ghc-text-sm);
}

.ghc-sg__toc a {
	display: block;
	padding-block: var(--ghc-space-3xs);
	color: var(--ghc-color-text);
	text-decoration: none;
}

.ghc-sg__toc a:hover {
	color: var(--ghc-color-link);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Section blocks
   -------------------------------------------------------------------------- */

.ghc-sg__group {
	padding-block-start: var(--ghc-space-2xl);
	scroll-margin-block-start: calc(var(--ghc-header-height) + var(--ghc-space-lg));
}

.ghc-sg__group + .ghc-sg__group {
	margin-block-start: var(--ghc-space-2xl);
	border-block-start: 1px solid var(--ghc-color-border);
}

.ghc-sg__group-title {
	margin-block-end: var(--ghc-space-lg);
	font-size: var(--ghc-text-2xl);
}

.ghc-sg__demo {
	margin-block-end: var(--ghc-space-xl);
}

.ghc-sg__label {
	display: block;
	margin-block-end: var(--ghc-space-2xs);
	color: var(--ghc-color-text-muted);
	font-family: var(--ghc-font-body);
	font-size: var(--ghc-text-sm);
	font-weight: var(--ghc-weight-bold);
	letter-spacing: var(--ghc-tracking-wide);
	text-transform: uppercase;
}

.ghc-sg__note {
	margin-block: var(--ghc-space-2xs) var(--ghc-space-sm);
	color: var(--ghc-color-text-muted);
	font-size: var(--ghc-text-sm);
	max-inline-size: var(--ghc-measure);
}

/* Panel that holds a live component demo. */
.ghc-sg__stage {
	padding: var(--ghc-space-lg);
	border: 1px dashed var(--ghc-color-border-control);
	border-radius: var(--ghc-radius-lg);
}

.ghc-sg__stage + .ghc-sg__stage {
	margin-block-start: var(--ghc-space-sm);
}

.ghc-sg__stage.ghc-surface-soft,
.ghc-sg__stage.ghc-surface-inverse {
	border-style: solid;
}

.ghc-sg__code {
	display: block;
	margin-block-start: var(--ghc-space-2xs);
	padding: var(--ghc-space-sm);
	overflow-x: auto;
	background-color: var(--ghc-navy-900);
	border-radius: var(--ghc-radius-md);
	color: var(--ghc-cream-50);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--ghc-text-sm);
	line-height: 1.6;
	white-space: pre;
	tab-size: 4;
}

/* --------------------------------------------------------------------------
   Colour swatches
   -------------------------------------------------------------------------- */

.ghc-sg__swatches {
	display: grid;
	gap: var(--ghc-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ghc-sg__swatch {
	overflow: hidden;
	border: 1px solid var(--ghc-color-border);
	border-radius: var(--ghc-radius-md);
}

.ghc-sg__swatch-chip {
	display: flex;
	align-items: flex-end;
	block-size: 5rem;
	padding: var(--ghc-space-2xs);
	font-size: var(--ghc-text-sm);
	font-weight: var(--ghc-weight-bold);
}

.ghc-sg__swatch-meta {
	padding: var(--ghc-space-2xs) var(--ghc-space-xs) var(--ghc-space-xs);
	font-size: var(--ghc-text-sm);
}

.ghc-sg__swatch-name {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: var(--ghc-weight-semibold);
	color: var(--ghc-color-heading);
}

.ghc-sg__swatch-hex,
.ghc-sg__swatch-use {
	display: block;
	color: var(--ghc-color-text-muted);
	font-size: var(--ghc-text-xs);
}

/* --------------------------------------------------------------------------
   Contrast table
   -------------------------------------------------------------------------- */

.ghc-sg__table {
	inline-size: 100%;
	font-size: var(--ghc-text-sm);
}

.ghc-sg__table th {
	white-space: nowrap;
}

.ghc-sg__ratio {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-weight: var(--ghc-weight-bold);
	white-space: nowrap;
}

.ghc-sg__verdict--pass {
	color: var(--ghc-color-success);
	font-weight: var(--ghc-weight-bold);
}

.ghc-sg__verdict--fail {
	color: var(--ghc-color-error);
	font-weight: var(--ghc-weight-bold);
}

.ghc-sg__pair {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 5.5rem;
	padding: var(--ghc-space-3xs) var(--ghc-space-2xs);
	border-radius: var(--ghc-radius-sm);
	font-weight: var(--ghc-weight-semibold);
}

/* --------------------------------------------------------------------------
   Type and space scales
   -------------------------------------------------------------------------- */

.ghc-sg__type-row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--ghc-space-sm);
	padding-block: var(--ghc-space-xs);
	border-block-end: 1px solid var(--ghc-color-border);
}

.ghc-sg__type-token {
	flex: none;
	inline-size: 10rem;
	color: var(--ghc-color-text-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--ghc-text-xs);
}

.ghc-sg__space-row {
	display: flex;
	align-items: center;
	gap: var(--ghc-space-sm);
	padding-block: var(--ghc-space-3xs);
}

.ghc-sg__space-bar {
	block-size: 1.25rem;
	background-color: var(--ghc-gold-500);
	border-radius: var(--ghc-radius-sm);
}

/* --------------------------------------------------------------------------
   Icon grid
   -------------------------------------------------------------------------- */

.ghc-sg__icons {
	display: grid;
	gap: var(--ghc-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.ghc-sg__icon-cell {
	display: grid;
	justify-items: center;
	gap: var(--ghc-space-3xs);
	padding: var(--ghc-space-sm);
	border: 1px solid var(--ghc-color-border);
	border-radius: var(--ghc-radius-md);
	text-align: center;
}

.ghc-sg__icon-cell .ghc-icon {
	inline-size: 1.75rem;
	block-size: 1.75rem;
	color: var(--ghc-color-heading);
}

.ghc-sg__icon-name {
	color: var(--ghc-color-text-muted);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--ghc-text-xs);
	overflow-wrap: anywhere;
}