/**
 * BlueGam UI system primitives.
 *
 * This stylesheet is intentionally component-scoped. The integration layer is
 * responsible for enqueueing it in the front end and block editor.
 */

/* Utilities */

.bg-visually-hidden {
	block-size: 1px;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

.bg-stack {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.bg-cluster {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

/* Buttons */

.bg-button {
	align-items: center;
	appearance: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--wp--custom--radius--input);
	box-shadow: none;
	color: var(--wp--preset--color--text-primary);
	cursor: pointer;
	display: inline-flex;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	gap: var(--wp--preset--spacing--20);
	justify-content: center;
	line-height: var(--wp--custom--typography--line-height--compact);
	min-block-size: var(--wp--custom--control--min-size);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--50);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		border-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		box-shadow var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		transform var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

.bg-button:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.bg-button:not(:disabled):not([aria-disabled="true"]):active {
	transform: translateY(1px);
}

.bg-button--primary {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--surface);
}

.bg-button--primary:not(:disabled):not([aria-disabled="true"]):hover {
	background-color: var(--wp--preset--color--primary-hover);
	color: var(--wp--preset--color--surface);
}

.bg-button--primary:not(:disabled):not([aria-disabled="true"]):active {
	background-color: var(--wp--preset--color--primary-active);
}

.bg-button--secondary {
	background-color: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--border-strong);
	box-shadow: var(--wp--preset--shadow--xs);
}

.bg-button--secondary:not(:disabled):not([aria-disabled="true"]):hover {
	background-color: var(--wp--preset--color--blue-50);
	border-color: var(--wp--preset--color--blue-200);
	color: var(--wp--preset--color--primary-hover);
}

.bg-button--secondary:not(:disabled):not([aria-disabled="true"]):active {
	background-color: var(--wp--preset--color--blue-100);
	border-color: var(--wp--preset--color--primary);
}

.bg-button--ghost {
	color: var(--wp--preset--color--primary);
}

.bg-button--ghost:not(:disabled):not([aria-disabled="true"]):hover {
	background-color: var(--wp--preset--color--blue-50);
	color: var(--wp--preset--color--primary-hover);
}

.bg-button--ghost:not(:disabled):not([aria-disabled="true"]):active {
	background-color: var(--wp--preset--color--blue-100);
	color: var(--wp--preset--color--primary-active);
}

.bg-button--icon {
	padding: var(--wp--preset--spacing--30);
	inline-size: var(--wp--custom--control--min-size);
}

.bg-button__icon,
.bg-alert__icon,
.bg-empty-state__icon svg {
	block-size: var(--wp--preset--spacing--50);
	flex: 0 0 auto;
	inline-size: var(--wp--preset--spacing--50);
}

.bg-button:disabled,
.bg-button[aria-disabled="true"] {
	background-color: var(--wp--preset--color--surface-soft);
	border-color: var(--wp--preset--color--border);
	box-shadow: none;
	color: var(--wp--preset--color--text-light);
	cursor: not-allowed;
	opacity: 1;
	transform: none;
}

.bg-button[aria-disabled="true"] {
	pointer-events: none;
}

.bg-button[aria-busy="true"] {
	cursor: progress;
	pointer-events: none;
}

.bg-button--primary[aria-busy="true"] {
	background-color: var(--wp--preset--color--primary);
	border-color: transparent;
	color: var(--wp--preset--color--surface);
}

.bg-button[aria-busy="true"]::before {
	animation: bg-spin 800ms linear infinite;
	block-size: var(--wp--preset--spacing--40);
	border: 2px solid currentColor;
	border-block-start-color: transparent;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: var(--wp--preset--spacing--40);
}

/* Fields */

.bg-field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	inline-size: 100%;
}

.bg-field__label,
.bg-choice__label {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--typography--line-height--compact);
}

.bg-field__required {
	color: var(--wp--preset--color--error);
}

.bg-input,
.bg-select,
.bg-textarea {
	appearance: none;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--input);
	box-shadow: var(--wp--preset--shadow--xs);
	color: var(--wp--preset--color--text-primary);
	font: inherit;
	font-size: var(--wp--preset--font-size--body);
	inline-size: 100%;
	line-height: var(--wp--custom--typography--line-height--compact);
	min-block-size: var(--wp--custom--control--min-size);
	padding-block: var(--wp--preset--spacing--30);
	padding-inline: var(--wp--preset--spacing--40);
	transition:
		background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		border-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		box-shadow var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

.bg-input::placeholder,
.bg-textarea::placeholder {
	color: var(--wp--preset--color--text-muted);
	opacity: 1;
}

.bg-input:hover:not(:disabled),
.bg-select:hover:not(:disabled),
.bg-textarea:hover:not(:disabled) {
	border-color: var(--wp--preset--color--text-light);
}

.bg-input:focus-visible,
.bg-select:focus-visible,
.bg-textarea:focus-visible,
.bg-choice__control:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent);
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.bg-textarea {
	min-block-size: 128px;
	resize: vertical;
}

.bg-control-wrap,
.bg-select-wrap {
	position: relative;
}

.bg-control-wrap__icon,
.bg-select-wrap__icon {
	block-size: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--text-muted);
	inline-size: var(--wp--preset--spacing--50);
	inset-block-start: 50%;
	pointer-events: none;
	position: absolute;
	transform: translateY(-50%);
}

.bg-control-wrap__icon {
	inset-inline-start: var(--wp--preset--spacing--40);
}

.bg-select-wrap__icon {
	inset-inline-end: var(--wp--preset--spacing--40);
}

.bg-input--with-leading {
	padding-inline-start: var(--wp--preset--spacing--110);
}

.bg-select {
	cursor: pointer;
	padding-inline-end: var(--wp--preset--spacing--110);
}

.bg-field__help,
.bg-field__message {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--typography--line-height--compact);
	margin: 0;
}

.bg-field--error :is(.bg-input, .bg-select, .bg-textarea) {
	border-color: var(--wp--preset--color--error);
}

.bg-field--error .bg-field__message {
	color: var(--wp--preset--color--error);
}

.bg-field--success :is(.bg-input, .bg-select, .bg-textarea) {
	border-color: var(--wp--preset--color--success);
}

.bg-field--success .bg-field__message {
	color: var(--wp--preset--color--success);
}

.bg-field--disabled .bg-field__label {
	color: var(--wp--preset--color--text-light);
}

.bg-input:disabled,
.bg-select:disabled,
.bg-textarea:disabled {
	background-color: var(--wp--preset--color--surface-soft);
	border-color: var(--wp--preset--color--border);
	box-shadow: none;
	color: var(--wp--preset--color--text-light);
	cursor: not-allowed;
}

.bg-choice-group {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.bg-choice {
	align-items: flex-start;
	cursor: pointer;
	display: inline-flex;
	gap: var(--wp--preset--spacing--30);
	inline-size: fit-content;
	min-block-size: var(--wp--custom--control--min-size);
	padding-block: var(--wp--preset--spacing--20);
}

.bg-choice__control {
	accent-color: var(--wp--preset--color--primary);
	block-size: var(--wp--preset--spacing--50);
	flex: 0 0 auto;
	inline-size: var(--wp--preset--spacing--50);
	margin-block: 1px 0;
}

.bg-choice__control:disabled,
.bg-choice__control:disabled + .bg-choice__content {
	cursor: not-allowed;
	opacity: 0.55;
}

.bg-choice__content {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.bg-choice__help {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--caption);
}

/* Badges */

.bg-badge {
	align-items: center;
	background-color: var(--wp--preset--color--surface-soft);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-secondary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
	gap: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--typography--line-height--compact);
	min-block-size: var(--wp--preset--spacing--70);
	padding-block: var(--wp--preset--spacing--10);
	padding-inline: var(--wp--preset--spacing--30);
}

.bg-badge::before {
	background-color: currentColor;
	block-size: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	inline-size: var(--wp--preset--spacing--20);
}

.bg-badge--info {
	background-color: var(--wp--preset--color--blue-50);
	border-color: var(--wp--preset--color--blue-200);
	color: var(--wp--preset--color--primary-active);
}

.bg-badge--success {
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 9%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 24%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--text-primary);
}

.bg-badge--success::before {
	color: var(--wp--preset--color--success);
}

.bg-badge--warning {
	background-color: color-mix(in srgb, var(--wp--preset--color--warning) 10%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--warning) 28%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--text-primary);
}

.bg-badge--warning::before {
	color: var(--wp--preset--color--warning);
}

.bg-badge--error {
	background-color: color-mix(in srgb, var(--wp--preset--color--error) 8%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--error) 24%, var(--wp--preset--color--surface));
	color: var(--wp--preset--color--text-primary);
}

.bg-badge--error::before {
	color: var(--wp--preset--color--error);
}

/* Alerts */

.bg-alert {
	align-items: flex-start;
	background-color: var(--wp--preset--color--blue-50);
	border: 1px solid var(--wp--preset--color--blue-200);
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--text-secondary);
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: auto minmax(0, 1fr);
	padding: var(--wp--preset--spacing--40);
}

.bg-alert__icon {
	color: var(--wp--preset--color--primary);
	margin-block-start: 2px;
}

.bg-alert__content {
	display: grid;
	gap: var(--wp--preset--spacing--10);
}

.bg-alert__title {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: var(--wp--custom--typography--line-height--compact);
	margin: 0;
}

.bg-alert__message {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

.bg-alert--success {
	background-color: color-mix(in srgb, var(--wp--preset--color--success) 7%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--success) 26%, var(--wp--preset--color--surface));
}

.bg-alert--success .bg-alert__icon {
	color: var(--wp--preset--color--success);
}

.bg-alert--warning {
	background-color: color-mix(in srgb, var(--wp--preset--color--warning) 8%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--warning) 30%, var(--wp--preset--color--surface));
}

.bg-alert--warning .bg-alert__icon {
	color: var(--wp--preset--color--warning);
}

.bg-alert--error {
	background-color: color-mix(in srgb, var(--wp--preset--color--error) 7%, var(--wp--preset--color--surface));
	border-color: color-mix(in srgb, var(--wp--preset--color--error) 26%, var(--wp--preset--color--surface));
}

.bg-alert--error .bg-alert__icon {
	color: var(--wp--preset--color--error);
}

/* Cards */

.bg-card {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--xs);
	color: var(--wp--preset--color--text-secondary);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--60);
	position: relative;
}

.bg-card__eyebrow {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	letter-spacing: 0.02em;
	margin: 0;
}

.bg-card__title {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	line-height: var(--wp--custom--typography--line-height--compact);
	margin: 0;
}

.bg-card__text {
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

.bg-card--interactive {
	appearance: none;
	cursor: pointer;
	font: inherit;
	inline-size: 100%;
	text-align: start;
	text-decoration: none;
	transition:
		border-color var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		box-shadow var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard),
		transform var(--wp--custom--motion--duration--base) var(--wp--custom--motion--easing--standard);
}

.bg-card--interactive:hover {
	border-color: var(--wp--preset--color--blue-200);
	box-shadow: var(--wp--preset--shadow--sm);
	transform: translateY(-2px);
}

.bg-card--interactive:focus-visible {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 18%, transparent), var(--wp--preset--shadow--sm);
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}

.bg-card--interactive:active {
	box-shadow: var(--wp--preset--shadow--xs);
	transform: translateY(0);
}

.bg-card--selected {
	background-color: var(--wp--preset--color--blue-50);
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 1px var(--wp--preset--color--primary);
	padding-inline-end: var(--wp--preset--spacing--100);
}

.bg-card--selected::after {
	align-items: center;
	background-color: var(--wp--preset--color--primary);
	block-size: var(--wp--preset--spacing--70);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--surface);
	content: "\2713";
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	inline-size: var(--wp--preset--spacing--70);
	inset-block-start: var(--wp--preset--spacing--50);
	inset-inline-end: var(--wp--preset--spacing--50);
	justify-content: center;
	position: absolute;
}

/* Skeletons and empty state */

.bg-skeleton-group {
	display: grid;
	flex: 1;
	gap: var(--wp--preset--spacing--30);
}

.bg-skeleton {
	animation: bg-shimmer 1.6s ease-in-out infinite;
	background: linear-gradient(
		90deg,
		var(--wp--preset--color--surface-soft) 20%,
		var(--wp--preset--color--border) 45%,
		var(--wp--preset--color--surface-soft) 70%
	);
	background-size: 240% 100%;
	border-radius: var(--wp--custom--radius--small);
	block-size: var(--wp--preset--spacing--40);
	inline-size: 100%;
	overflow: hidden;
}

.bg-skeleton--avatar {
	block-size: var(--wp--preset--spacing--100);
	border-radius: var(--wp--custom--radius--pill);
	inline-size: var(--wp--preset--spacing--100);
}

.bg-skeleton--title {
	block-size: var(--wp--preset--spacing--50);
	inline-size: min(72%, 320px);
}

.bg-skeleton--text {
	inline-size: min(92%, 520px);
}

.bg-skeleton--text-short {
	inline-size: min(58%, 280px);
}

.bg-skeleton--panel {
	block-size: 152px;
	border-radius: var(--wp--custom--radius--card);
}

.bg-empty-state {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border: 1px dashed var(--wp--preset--color--border-strong);
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding-block: var(--wp--preset--spacing--100);
	padding-inline: var(--wp--preset--spacing--60);
	text-align: center;
}

.bg-empty-state__icon {
	align-items: center;
	background-color: var(--wp--preset--color--blue-50);
	block-size: var(--wp--preset--spacing--120);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--primary);
	display: flex;
	inline-size: var(--wp--preset--spacing--120);
	justify-content: center;
}

.bg-empty-state__title {
	color: var(--wp--preset--color--text-primary);
	font-size: var(--wp--preset--font-size--heading-4);
	font-weight: 600;
	margin: 0;
}

.bg-empty-state__text {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
	max-inline-size: 46ch;
}

/* UI Lab */

.bg-ui-lab {
	background-color: var(--wp--preset--color--page-background);
	color: var(--wp--preset--color--text-primary);
	direction: rtl;
	font-family: var(--wp--preset--font-family--primary);
	margin: 0;
	max-inline-size: none;
	padding-block: var(--wp--preset--spacing--100);
	padding-inline: var(--wp--custom--layout--container-padding--desktop);
	text-align: start;
}

.bg-ui-lab__inner {
	inline-size: 100%;
	margin-inline: auto;
	max-inline-size: var(--wp--style--global--wide-size);
}

.bg-ui-lab__header {
	background-color: var(--wp--preset--color--text-primary);
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--md);
	color: var(--wp--preset--color--surface);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	margin-block-end: var(--wp--preset--spacing--80);
	overflow: hidden;
	padding-block: var(--wp--preset--spacing--100);
	padding-inline: var(--wp--preset--spacing--90);
	position: relative;
}

.bg-ui-lab__header::after {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 70%, transparent);
	block-size: 180px;
	border-radius: var(--wp--custom--radius--pill);
	content: "";
	filter: blur(10px);
	inline-size: 180px;
	inset-block-start: -90px;
	inset-inline-end: -50px;
	opacity: 0.7;
	position: absolute;
}

.bg-ui-lab__kicker {
	color: var(--wp--preset--color--blue-200);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.04em;
	margin: 0;
}

.bg-ui-lab__title {
	color: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--hero-display);
	font-weight: 700;
	line-height: 1.2;
	margin: 0;
	max-inline-size: 16ch;
	position: relative;
	z-index: 1;
}

.bg-ui-lab__intro {
	color: var(--wp--preset--color--blue-100);
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
	max-inline-size: 62ch;
}

.bg-ui-lab__nav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin-block-end: var(--wp--preset--spacing--80);
}

.bg-ui-lab__nav a {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--text-secondary);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	min-block-size: var(--wp--custom--control--min-size);
	padding-inline: var(--wp--preset--spacing--40);
	text-decoration: none;
	transition:
		background-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		border-color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard),
		color var(--wp--custom--motion--duration--fast) var(--wp--custom--motion--easing--standard);
}

.bg-ui-lab__nav a:hover {
	background-color: var(--wp--preset--color--blue-50);
	border-color: var(--wp--preset--color--blue-200);
	color: var(--wp--preset--color--primary-hover);
}

.bg-ui-lab__nav a:focus-visible {
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.bg-ui-lab__section {
	border-block-start: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--60);
	padding-block: var(--wp--preset--spacing--100);
	scroll-margin-block-start: var(--wp--preset--spacing--60);
}

.bg-ui-lab__section-header {
	display: grid;
	gap: var(--wp--preset--spacing--20);
	max-inline-size: 62ch;
}

.bg-ui-lab__section-title {
	font-size: var(--wp--preset--font-size--heading-2);
	font-weight: 700;
	line-height: 1.3;
	margin: 0;
}

.bg-ui-lab__section-copy {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--body);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

.bg-ui-lab__grid {
	display: grid;
	gap: var(--wp--preset--spacing--40);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.bg-ui-lab__grid--wide {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
}

.bg-ui-lab__panel {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--card);
	box-shadow: var(--wp--preset--shadow--xs);
	display: grid;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--60);
}

.bg-ui-lab__panel-title {
	color: var(--wp--preset--color--text-secondary);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin: 0;
}

.bg-ui-lab__note {
	color: var(--wp--preset--color--text-muted);
	font-size: var(--wp--preset--font-size--caption);
	line-height: var(--wp--custom--typography--line-height--body);
	margin: 0;
}

.bg-swatch {
	background-color: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--input);
	overflow: hidden;
}

.bg-swatch__color {
	block-size: var(--wp--preset--spacing--110);
	border-block-end: 1px solid var(--wp--preset--color--border);
}

.bg-swatch__meta {
	display: grid;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--30);
}

.bg-swatch__name {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.bg-swatch__value {
	color: var(--wp--preset--color--text-muted);
	direction: ltr;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: var(--wp--preset--font-size--caption);
	justify-self: start;
}

.bg-swatch--primary .bg-swatch__color { background-color: var(--wp--preset--color--primary); }
.bg-swatch--primary-hover .bg-swatch__color { background-color: var(--wp--preset--color--primary-hover); }
.bg-swatch--primary-active .bg-swatch__color { background-color: var(--wp--preset--color--primary-active); }
.bg-swatch--blue-50 .bg-swatch__color { background-color: var(--wp--preset--color--blue-50); }
.bg-swatch--blue-100 .bg-swatch__color { background-color: var(--wp--preset--color--blue-100); }
.bg-swatch--blue-200 .bg-swatch__color { background-color: var(--wp--preset--color--blue-200); }
.bg-swatch--page .bg-swatch__color { background-color: var(--wp--preset--color--page-background); }
.bg-swatch--surface .bg-swatch__color { background-color: var(--wp--preset--color--surface); }
.bg-swatch--surface-soft .bg-swatch__color { background-color: var(--wp--preset--color--surface-soft); }
.bg-swatch--text-primary .bg-swatch__color { background-color: var(--wp--preset--color--text-primary); }
.bg-swatch--text-secondary .bg-swatch__color { background-color: var(--wp--preset--color--text-secondary); }
.bg-swatch--text-muted .bg-swatch__color { background-color: var(--wp--preset--color--text-muted); }
.bg-swatch--text-light .bg-swatch__color { background-color: var(--wp--preset--color--text-light); }
.bg-swatch--border .bg-swatch__color { background-color: var(--wp--preset--color--border); }
.bg-swatch--border-strong .bg-swatch__color { background-color: var(--wp--preset--color--border-strong); }
.bg-swatch--success .bg-swatch__color { background-color: var(--wp--preset--color--success); }
.bg-swatch--warning .bg-swatch__color { background-color: var(--wp--preset--color--warning); }
.bg-swatch--error .bg-swatch__color { background-color: var(--wp--preset--color--error); }

.bg-type-sample {
	border-block-end: 1px solid var(--wp--preset--color--border);
	display: grid;
	gap: var(--wp--preset--spacing--20);
	padding-block-end: var(--wp--preset--spacing--40);
}

.bg-type-sample:last-child {
	border-block-end: 0;
	padding-block-end: 0;
}

.bg-type-sample__meta {
	color: var(--wp--preset--color--text-muted);
	direction: ltr;
	font-size: var(--wp--preset--font-size--caption);
	justify-self: start;
}

.bg-type-sample__text {
	line-height: var(--wp--custom--typography--line-height--compact);
	margin: 0;
}

.bg-type-sample--display .bg-type-sample__text { font-size: var(--wp--preset--font-size--hero-display); font-weight: 700; }
.bg-type-sample--h1 .bg-type-sample__text { font-size: var(--wp--preset--font-size--heading-1); font-weight: 700; }
.bg-type-sample--h2 .bg-type-sample__text { font-size: var(--wp--preset--font-size--heading-2); font-weight: 700; }
.bg-type-sample--h3 .bg-type-sample__text { font-size: var(--wp--preset--font-size--heading-3); font-weight: 700; }
.bg-type-sample--h4 .bg-type-sample__text { font-size: var(--wp--preset--font-size--heading-4); font-weight: 600; }
.bg-type-sample--large .bg-type-sample__text { font-size: var(--wp--preset--font-size--large); font-weight: 400; }
.bg-type-sample--body .bg-type-sample__text { font-size: var(--wp--preset--font-size--body); font-weight: 400; line-height: var(--wp--custom--typography--line-height--body); }
.bg-type-sample--small .bg-type-sample__text { font-size: var(--wp--preset--font-size--small); font-weight: 400; }
.bg-type-sample--caption .bg-type-sample__text { font-size: var(--wp--preset--font-size--caption); font-weight: 400; }

.bg-scale-list {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.bg-space-demo {
	align-items: center;
	display: grid;
	gap: var(--wp--preset--spacing--30);
	grid-template-columns: 48px minmax(0, 1fr);
}

.bg-space-demo__label {
	color: var(--wp--preset--color--text-muted);
	direction: ltr;
	font-size: var(--wp--preset--font-size--caption);
}

.bg-space-demo__bar {
	background-color: var(--wp--preset--color--primary);
	block-size: var(--wp--preset--spacing--20);
	border-radius: var(--wp--custom--radius--pill);
	max-inline-size: 100%;
}

.bg-space-demo--10 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--10); }
.bg-space-demo--20 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--20); }
.bg-space-demo--30 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--30); }
.bg-space-demo--40 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--40); }
.bg-space-demo--50 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--50); }
.bg-space-demo--60 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--60); }
.bg-space-demo--70 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--70); }
.bg-space-demo--80 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--80); }
.bg-space-demo--90 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--90); }
.bg-space-demo--100 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--100); }
.bg-space-demo--110 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--110); }
.bg-space-demo--120 .bg-space-demo__bar { inline-size: var(--wp--preset--spacing--120); }

.bg-radius-demo {
	align-items: center;
	background-color: var(--wp--preset--color--blue-50);
	block-size: 88px;
	border: 1px solid var(--wp--preset--color--blue-200);
	color: var(--wp--preset--color--primary-active);
	display: flex;
	font-size: var(--wp--preset--font-size--caption);
	inline-size: 112px;
	justify-content: center;
}

.bg-radius-demo--small { border-radius: var(--wp--custom--radius--small); }
.bg-radius-demo--input { border-radius: var(--wp--custom--radius--input); }
.bg-radius-demo--card { border-radius: var(--wp--custom--radius--card); }
.bg-radius-demo--large { border-radius: var(--wp--custom--radius--large); }
.bg-radius-demo--pill { border-radius: var(--wp--custom--radius--pill); }

.bg-shadow-demo {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	block-size: 104px;
	border-radius: var(--wp--custom--radius--card);
	color: var(--wp--preset--color--text-secondary);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	justify-content: center;
}

.bg-shadow-demo--xs { box-shadow: var(--wp--preset--shadow--xs); }
.bg-shadow-demo--sm { box-shadow: var(--wp--preset--shadow--sm); }
.bg-shadow-demo--md { box-shadow: var(--wp--preset--shadow--md); }

.bg-focus-demo {
	align-items: center;
	background-color: var(--wp--preset--color--surface-soft);
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	justify-content: center;
	min-block-size: 144px;
	padding: var(--wp--preset--spacing--60);
}

.bg-focus-demo__target {
	align-items: center;
	background-color: var(--wp--preset--color--surface);
	block-size: var(--wp--custom--control--min-size);
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: var(--wp--custom--radius--input);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	color: var(--wp--preset--color--text-primary);
	display: flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	outline: 3px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
	padding-inline: var(--wp--preset--spacing--40);
}

@keyframes bg-spin {
	to { transform: rotate(1turn); }
}

@keyframes bg-shimmer {
	0% { background-position: 100% 0; }
	100% { background-position: -100% 0; }
}

@media (max-width: 1024px) {
	.bg-ui-lab {
		padding-inline: var(--wp--custom--layout--container-padding--tablet);
	}
}

@media (max-width: 640px) {
	.bg-ui-lab {
		padding-block: var(--wp--preset--spacing--90);
		padding-inline: var(--wp--custom--layout--container-padding--mobile);
	}

	.bg-ui-lab__header {
		padding-block: var(--wp--preset--spacing--80);
		padding-inline: var(--wp--preset--spacing--60);
	}

	.bg-ui-lab__panel,
	.bg-card {
		padding: var(--wp--preset--spacing--50);
	}

	.bg-ui-lab__section {
		padding-block: var(--wp--preset--spacing--90);
	}

	.bg-cluster--actions {
		align-items: stretch;
		flex-direction: column;
	}

	.bg-cluster--actions .bg-button {
		inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bg-button,
	.bg-card--interactive,
	.bg-ui-lab__nav a {
		transition-duration: 0s;
	}

	.bg-button[aria-busy="true"]::before,
	.bg-skeleton {
		animation: none;
	}
}