/**
 * Ubient Docs — shared styles for formats and enhanced core blocks.
 *
 * Design values are tokens (`--wp--custom--ubient-docs--*`, defaults in
 * design-tokens.json). They are edited in the Site Editor: Options → Docs
 * design for the whole site, or a block's Styles tab for that block only.
 */

/* -------------------------------------------------------------------------
 * Badges (inline format and navigation badges)
 * ---------------------------------------------------------------------- */

.ubient-docs-badge {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--neutral);
	display: inline-flex;
	align-items: center;
	padding: var(--wp--custom--ubient-docs--badge--padding-y) var(--wp--custom--ubient-docs--badge--padding-x);
	border-radius: var(--wp--custom--ubient-docs--badge--radius);
	background-color: color-mix(in srgb, var(--ubient-docs-badge-color) var(--wp--custom--ubient-docs--badge--tint), transparent);
	color: var(--ubient-docs-badge-color);
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: var(--wp--custom--ubient-docs--badge--font-size);
	font-weight: var(--wp--custom--ubient-docs--badge--font-weight);
	line-height: 1.5;
	letter-spacing: 0.01em;
	vertical-align: 0.125em;
	white-space: nowrap;
}

.ubient-docs-badge.is-tone-accent {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--accent);
}

.ubient-docs-badge.is-tone-info {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--info);
}

.ubient-docs-badge.is-tone-success {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--success);
}

.ubient-docs-badge.is-tone-warning {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--warning);
}

.ubient-docs-badge.is-tone-danger {
	--ubient-docs-badge-color: var(--wp--custom--ubient-docs--badge--danger);
}

/* HTTP method badges */
.ubient-docs-method {
	--ubient-docs-method-color: var(--wp--custom--ubient-docs--method--other);
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	min-width: 2.75em;
	padding: 0.0625em 0.375em;
	border-radius: var(--wp--custom--ubient-docs--method--radius);
	background-color: color-mix(in srgb, var(--ubient-docs-method-color) var(--wp--custom--ubient-docs--method--tint), transparent);
	color: var(--ubient-docs-method-color);
	font-family: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	font-size: var(--wp--custom--ubient-docs--method--font-size);
	font-weight: var(--wp--custom--ubient-docs--method--font-weight);
	line-height: 1.6;
	letter-spacing: 0.02em;
}

.ubient-docs-method.is-method-get {
	--ubient-docs-method-color: var(--wp--custom--ubient-docs--method--get);
}

.ubient-docs-method.is-method-post {
	--ubient-docs-method-color: var(--wp--custom--ubient-docs--method--post);
}

.ubient-docs-method.is-method-put,
.ubient-docs-method.is-method-patch {
	--ubient-docs-method-color: var(--wp--custom--ubient-docs--method--put);
}

.ubient-docs-method.is-method-delete {
	--ubient-docs-method-color: var(--wp--custom--ubient-docs--method--delete);
}

/* -------------------------------------------------------------------------
 * Heading anchors
 * ---------------------------------------------------------------------- */

.ubient-docs-heading {
	position: relative;
}

.ubient-docs-heading-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--ubient-docs--anchor--size);
	height: var(--wp--custom--ubient-docs--anchor--size);
	margin-inline-start: 0.375rem;
	border-radius: var(--wp--custom--ubient-docs--anchor--radius);
	color: var(--wp--custom--ubient-docs--anchor--text) !important;
	text-decoration: none !important;
	vertical-align: middle;
	opacity: 0;
	transition: opacity var(--wp--custom--transition--duration, 150ms) var(--wp--custom--transition--easing, ease-out), background-color var(--wp--custom--transition--duration, 150ms) var(--wp--custom--transition--easing, ease-out);
}

.ubient-docs-heading:hover .ubient-docs-heading-anchor,
.ubient-docs-heading-anchor:focus-visible,
.ubient-docs-heading-anchor.is-copied {
	opacity: 1;
}

.ubient-docs-heading-anchor:hover {
	background-color: var(--wp--custom--ubient-docs--anchor--hover-background);
}

.ubient-docs-heading-anchor.is-copied {
	color: var(--wp--custom--ubient-docs--anchor--copied) !important;
}

@media (hover: none) {

	.ubient-docs-heading-anchor {
		opacity: 0.6;
	}
}

/* -------------------------------------------------------------------------
 * Code blocks
 * ---------------------------------------------------------------------- */

pre.ubient-docs-code {
	position: relative;
	padding-top: 0 !important;
}

pre.ubient-docs-code:has(.ubient-docs-code__bar.is-floating) {
	padding-top: var(--wp--preset--spacing--40, 1rem) !important;
}

.ubient-docs-code__bar {
	position: sticky;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 2.5rem;
	margin-inline: calc(-1 * var(--wp--preset--spacing--40, 1rem));
	margin-bottom: var(--wp--preset--spacing--30, 0.75rem);
	padding-inline: var(--wp--preset--spacing--40, 1rem) 0.375rem;
	border-bottom: 1px solid var(--wp--custom--ubient-docs--code--bar-border);
	color: var(--wp--custom--ubient-docs--code--bar-text);
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: var(--wp--custom--ubient-docs--code--bar-font-size);
	white-space: nowrap;
	user-select: none;
}

.ubient-docs-code__bar.is-floating {
	position: absolute;
	top: 0.375rem;
	right: 0.375rem;
	left: auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.ubient-docs-code__title {
	overflow: hidden;
	text-overflow: ellipsis;
}

.ubient-docs-code__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.875rem;
	height: 1.875rem;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: var(--wp--custom--ubient-docs--code--copy-radius);
	background: none;
	color: inherit;
	cursor: pointer;
	transition: background-color var(--wp--custom--transition--duration, 150ms) var(--wp--custom--transition--easing, ease-out), color var(--wp--custom--transition--duration, 150ms) var(--wp--custom--transition--easing, ease-out);
}

.ubient-docs-code__copy:hover {
	background-color: var(--wp--custom--ubient-docs--code--copy-hover-background);
	color: var(--wp--custom--ubient-docs--code--copy-hover-text);
}

.ubient-docs-code__bar.is-floating .ubient-docs-code__copy {
	background-color: var(--wp--custom--ubient-docs--code--copy-floating-background);
	opacity: 0;
}

pre.ubient-docs-code:hover .ubient-docs-code__bar.is-floating .ubient-docs-code__copy,
.ubient-docs-code__bar.is-floating .ubient-docs-code__copy:focus-visible,
.ubient-docs-code__copy.is-copied {
	opacity: 1;
}

.ubient-docs-code__copy .is-done,
.ubient-docs-code__copy.is-copied .is-idle {
	display: none;
}

.ubient-docs-code__copy.is-copied .is-done {
	display: block;
	color: var(--wp--custom--ubient-docs--code--copied);
}

/* Lines (numbers and highlights) */
pre.ubient-docs-code .ubient-docs-line {
	display: inline-block;
	width: 100%;
}

pre.ubient-docs-code .ubient-docs-line.is-highlighted {
	margin-inline: calc(-1 * var(--wp--preset--spacing--40, 1rem));
	padding-inline: var(--wp--preset--spacing--40, 1rem);
	background-color: var(--wp--custom--ubient-docs--code--highlight-background);
	box-shadow: inset 2px 0 0 var(--wp--custom--ubient-docs--code--highlight-marker);
	box-sizing: content-box;
}

pre.ubient-docs-code.has-line-numbers code {
	counter-reset: ubient-docs-line;
}

pre.ubient-docs-code.has-line-numbers .ubient-docs-line::before {
	content: counter(ubient-docs-line);
	counter-increment: ubient-docs-line;
	display: inline-block;
	width: 2.5ch;
	margin-inline-end: 1.25ch;
	color: var(--wp--custom--ubient-docs--code--line-number);
	text-align: end;
	opacity: var(--wp--custom--ubient-docs--code--line-number-opacity);
	user-select: none;
}

/* Syntax tokens (highlight.js class names) */
.ubient-docs-code .hljs-comment,
.ubient-docs-code .hljs-quote {
	color: var(--wp--custom--ubient-docs--syntax--comment);
	font-style: italic;
}

.ubient-docs-code .hljs-keyword,
.ubient-docs-code .hljs-selector-tag,
.ubient-docs-code .hljs-literal,
.ubient-docs-code .hljs-doctag,
.ubient-docs-code .hljs-section {
	color: var(--wp--custom--ubient-docs--syntax--keyword);
}

.ubient-docs-code .hljs-string,
.ubient-docs-code .hljs-regexp,
.ubient-docs-code .hljs-template-tag,
.ubient-docs-code .hljs-char\.escape {
	color: var(--wp--custom--ubient-docs--syntax--string);
}

.ubient-docs-code .hljs-number,
.ubient-docs-code .hljs-symbol,
.ubient-docs-code .hljs-bullet {
	color: var(--wp--custom--ubient-docs--syntax--number);
}

.ubient-docs-code .hljs-title,
.ubient-docs-code .hljs-title\.function_,
.ubient-docs-code .hljs-name {
	color: var(--wp--custom--ubient-docs--syntax--title);
}

.ubient-docs-code .hljs-attr,
.ubient-docs-code .hljs-attribute,
.ubient-docs-code .hljs-property,
.ubient-docs-code .hljs-selector-attr,
.ubient-docs-code .hljs-selector-class,
.ubient-docs-code .hljs-selector-id {
	color: var(--wp--custom--ubient-docs--syntax--attribute);
}

.ubient-docs-code .hljs-type,
.ubient-docs-code .hljs-built_in,
.ubient-docs-code .hljs-title\.class_ {
	color: var(--wp--custom--ubient-docs--syntax--type);
}

.ubient-docs-code .hljs-meta,
.ubient-docs-code .hljs-params,
.ubient-docs-code .hljs-punctuation {
	color: var(--wp--custom--ubient-docs--syntax--meta);
}

.ubient-docs-code .hljs-variable,
.ubient-docs-code .hljs-template-variable {
	color: var(--wp--custom--ubient-docs--syntax--variable);
}

.ubient-docs-code .hljs-addition {
	background-color: color-mix(in srgb, var(--wp--custom--ubient-docs--syntax--addition) 12%, transparent);
	color: var(--wp--custom--ubient-docs--syntax--addition);
}

.ubient-docs-code .hljs-deletion {
	background-color: color-mix(in srgb, var(--wp--custom--ubient-docs--syntax--deletion) 12%, transparent);
	color: var(--wp--custom--ubient-docs--syntax--deletion);
}

.ubient-docs-code .hljs-emphasis {
	font-style: italic;
}

.ubient-docs-code .hljs-strong {
	font-weight: 600;
}

/* -------------------------------------------------------------------------
 * Toast for copy feedback
 * ---------------------------------------------------------------------- */

.ubient-docs-toast {
	position: fixed;
	bottom: 1.5rem;
	left: 50%;
	z-index: 100000;
	padding: 0.5rem 0.875rem;
	border-radius: var(--wp--custom--ubient-docs--toast--radius);
	background-color: var(--wp--custom--ubient-docs--toast--background);
	color: var(--wp--custom--ubient-docs--toast--text);
	font-family: var(--wp--preset--font-family--sans, inherit);
	font-size: var(--wp--custom--ubient-docs--toast--font-size);
	box-shadow: var(--wp--custom--ubient-docs--toast--shadow);
	transform: translateX(-50%);
	pointer-events: none;
	animation: ubient-docs-toast 2s var(--wp--custom--transition--easing, ease-out) forwards;
}

@keyframes ubient-docs-toast {

	0% {
		opacity: 0;
		transform: translate(-50%, 0.5rem);
	}

	10%,
	85% {
		opacity: 1;
		transform: translate(-50%, 0);
	}

	100% {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {

	.ubient-docs-toast {
		animation-duration: 2s;
		animation-timing-function: steps(1, end);
	}
}