/* --- Resource Explorer ------------------------------------------------------------------------*/

body:has(#mxn-resources) .mxn-body h1 {
	display: none;
}

.mxn-scroll:has(#mxn-resources) {
	overflow: visible;
}

#mxn-resources {
	--mxn-resource-muted: color-mix(in srgb, var(--bs-secondary-color) 60%, var(--bs-body-bg));
	--mxn-search-highlight-color: var(--color-link, var(--bs-primary));
	--mxn-search-highlight-surface: var(--color-surface, var(--bs-body-bg));
	--mxn-search-highlight-text-color: var(--color-text, var(--bs-body-color));
	--mxn-search-filter-highlight-color: var(--bs-warning);
	--mxn-search-highlight-padding: 0 2px;
	--mxn-search-highlight-radius: 3px;
	max-width: 1100px;
	margin: 2rem auto 3rem;
	color: var(--color-text, var(--bs-body-color));
}

#mxn-resource-source-dialog {
	--mxn-search-highlight-color: var(--color-link, var(--bs-primary));
	--mxn-search-highlight-surface: var(--color-surface, var(--bs-body-bg));
	--mxn-search-highlight-text-color: var(--color-text, var(--bs-body-color));
	--mxn-search-highlight-padding: 0 2px;
	--mxn-search-highlight-radius: 3px;
}

#mxn-resource-query,
.mxn-resource-card-controls input {
	min-width: 0;
	padding: .4rem .65rem;
	border: 1px solid var(--color-control-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
}

#mxn-resource-query {
	width: 100%;
	min-height: 2.5rem;
}

.mxn-resource-search-field input[type="search"]::-webkit-search-cancel-button,
.mxn-resource-search-field input[type="search"]::-webkit-search-decoration,
.mxn-resource-search-field input[type="search"]::-webkit-search-results-button,
.mxn-resource-search-field input[type="search"]::-webkit-search-results-decoration,
.mxn-resource-search-field input[type="search"]::-ms-clear,
.mxn-resource-search-field input[type="search"]::-ms-reveal,
#mxn-resources input[type="search"]::-webkit-search-cancel-button,
#mxn-resources input[type="search"]::-webkit-search-decoration,
#mxn-resources input[type="search"]::-webkit-search-results-button,
#mxn-resources input[type="search"]::-webkit-search-results-decoration,
#mxn-resources input[type="search"]::-ms-clear,
#mxn-resources input[type="search"]::-ms-reveal {
	display: none;
	appearance: none;
}

#mxn-resource-query:hover,
#mxn-resource-query:focus,
.mxn-resource-card-controls input:hover,
.mxn-resource-card-controls input:focus {
	outline: 0;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-link, var(--bs-primary)) 30%, transparent);
	opacity: 1;
}

.mxn-resource-search-row,
.mxn-resource-card-controls {
	display: flex;
	align-items: center;
}

.mxn-resource-search-field {
	position: relative;
	width: 100%;
}

.mxn-resource-type-row {
	margin-top: .75rem;
}

.mxn-resource-sort-row {
	margin-top: .75rem;
}

.mxn-resource-search-field #mxn-resource-query {
	padding-right: 5rem;
}

.mxn-resource-search-field #mxn-node-highlight-toggle {
	position: absolute;
	right: 2.25rem;
	top: 50%;
	transform: translateY(-50%);
}

.mxn-resource-search-field #mxn-resource-reset {
	position: absolute;
	right: .25rem;
	top: 50%;
	transform: translateY(-50%);
}

.mxn-resource-category-groups {
	margin-top: .75rem;
}

.mxn-resource-facet-wrap {
	min-height: 2rem;
	padding-bottom: .5rem;
}

.mxn-resource-results-bar {
	padding: .65rem 0;
}

/* --- Resource Cards ---------------------------------------------------------------------------*/

#mxn-resources .mxn-card {
	position: relative;
	margin-bottom: .5rem;
	overflow: hidden;
}

.mxn-resource-card-header {
	display: flex;
	width: 100%;
	min-height: 3rem;
	align-items: center;
	gap: .5rem;
	padding: var(--space-sm, .5rem) 1.5rem;
	border: 0;
	background: transparent;
	color: inherit;
	text-align: left;
}

.mxn-resource-solo {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	flex: 0 0 auto;
	margin-left: 0;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted, var(--bs-secondary-color));
}

.mxn-resource-solo:hover,
.mxn-resource-solo:focus-visible {
	background: var(--color-surface-emphasis, var(--bs-secondary-bg));
	color: var(--color-text, var(--bs-body-color));
}

.mxn-resource-solo.is-active {
	color: var(--color-link, var(--bs-primary));
}

.mxn-resource-solo[hidden] {
	display: none;
}

.mxn-resource-card-name {
	flex: 0 1 auto;
	max-width: 40%;
}

.mxn-resource-card-symbol {
	flex: 0 1 auto;
	max-width: 35%;
	min-width: 0;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mxn-resource-card-symbol,
.mxn-resource-card-separator {
	color: var(--mxn-resource-muted);
}

.mxn-resource-header-spacer {
	flex: 1 1 auto;
	min-width: 0;
}

.mxn-resource-card-count {
	color: var(--mxn-resource-muted);
	white-space: nowrap;
}

.mxn-resource-header-icon-slot {
	display: flex;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
}

.mxn-resource-header-icon {
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	object-fit: contain;
}

.mxn-resource-chevron {
	margin-left: auto;
	transition: transform .15s;
}

.mxn-resource-card-header[aria-expanded="false"] .mxn-resource-chevron {
	transform: rotate(-90deg);
}

.mxn-resource-card-body {
	position: relative;
	padding: var(--space-md, 1rem);
	border-top: 1px solid var(--color-border, var(--bs-border-color));
	background-color: var(--color-api-card-background);
	font-size: .9rem;
}

.mxn-resource-card-body-has-solo {
	position: relative;
}

.mxn-resource-solo-card-body {
	position: absolute;
	top: .5rem;
	right: .75rem;
	z-index: 1;
}

.mxn-resource-card-body[hidden] {
	display: none;
}

.mxn-resource-info {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .2rem 0;
	margin-bottom: .5rem;
}

.mxn-resource-info-row {
	display: grid;
	grid-template-columns: 6.5rem minmax(0, 1fr);
	gap: .5rem;
}

.mxn-resource-info-label {
	font-weight: var(--font-weight-medium, 600);
}

.mxn-resource-name-value {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .5rem;
}

.mxn-resource-symbol-control {
	display: inline-flex;
	align-items: center;
	gap: .2rem;
	white-space: nowrap;
}

.mxn-resource-symbol-copy {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted, var(--bs-secondary-color));
}

.mxn-resource-symbol-copy:hover,
.mxn-resource-symbol-copy:focus-visible {
	color: var(--color-text, var(--bs-body-color));
}

.mxn-resource-info-row > :last-child,
.mxn-resource-info-resource a {
	min-width: 0;
	overflow-wrap: anywhere;
}

.mxn-resource-info-resources,
.mxn-resource-info-resource {
	display: grid;
	gap: .2rem .5rem;
}

.mxn-resource-info-resource {
	grid-template-columns: minmax(0, max-content) max-content;
	justify-content: start;
}

.mxn-resource-info-resource-bases {
	display: grid;
	gap: .2rem .5rem;
	margin-left: .5rem;
	padding-left: .5rem;
	border-left: 1px solid var(--color-border, var(--bs-border-color));
}

.mxn-resource-info-resource-bases[hidden] {
	display: none;
}

.mxn-resource-bases-toggle {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
	align-items: center;
	justify-content: center;
	color: var(--color-text-muted, var(--bs-secondary-color));
}

.mxn-resource-bases-toggle i {
	transition: transform .15s;
}

.mxn-resource-bases-toggle[aria-expanded="true"] i {
	transform: rotate(90deg);
}

.mxn-resource-card-controls {
	gap: .4rem;
	margin: 1rem 0 .6rem;
}

.mxn-resource-card-controls input {
	flex: 1;
	border-color: color-mix(in srgb, var(--bs-border-color) 65%, var(--bs-body-bg));
	background: var(--color-background, var(--bs-tertiary-bg));
	opacity: 75%;
}

.mxn-resource-card-controls input::placeholder {
	color: color-mix(in srgb, var(--bs-secondary-color) 75%, var(--bs-body-bg));
	opacity: 1;
}

.mxn-resource-parameter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: .35rem .6rem;
	padding: 1rem .2rem;
	border-bottom: 1px solid var(--color-border, var(--bs-border-color));
}

.mxn-resource-parameter-content {
	min-width: 0;
}

.mxn-resource-parameter-groups > .mxn-resource-parameter:last-of-type,
.mxn-resource-parameters > .mxn-resource-parameter:last-child {
	border-bottom: 0;
}

.mxn-resource-parameter-section {
	margin: 1rem 0;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
}

.mxn-resource-parameter-section > summary {
	display: flex;
	min-height: 2.25rem;
	align-items: center;
	justify-content: space-between;
	gap: .6rem;
	padding: .4rem .55rem;
	cursor: pointer;
	list-style: none;
}

.mxn-resource-parameter-section > summary::-webkit-details-marker {
	display: none;
}

.mxn-resource-parameter-section-heading {
	display: flex;
	min-width: 0;
	align-items: baseline;
	gap: .45rem;
	overflow-wrap: anywhere;
}

.mxn-resource-parameter-section-heading > .font-monospace {
	color: var(--mxn-resource-muted);
}

.mxn-resource-parameter-section-separator::before {
	content: "\2022";
}

.mxn-resource-parameter-section-path {
	flex: 0 1 60%;
	min-width: 0;
	margin-left: auto;
	overflow: hidden;
	text-align: right;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.mxn-resource-parameter-section-chevron {
	flex: 0 0 auto;
	transition: transform .15s;
}

.mxn-resource-parameter-section[open] .mxn-resource-parameter-section-chevron {
	transform: rotate(180deg);
}

.mxn-resource-parameter-section-content {
	padding: 0 .55rem .35rem;
}

.mxn-resource-parameter-section-content > .mxn-resource-parameters {
	padding: 0;
}

.mxn-resource-parameter-title,
.mxn-resource-parameter-meta {
	display: flex;
	justify-content: space-between;
	gap: .7rem;
	overflow-wrap: anywhere;
}

.mxn-resource-parameter-title,
#mxn-node-root .mxn-node-attribute-label {
	font-size: .9rem;
}

.mxn-resource-muted-label {
	color: var(--mxn-resource-muted) !important;
}

.mxn-resource-parameter-meta,
.mxn-resource-origin,
.mxn-resource-cycles,
.mxn-resource-parameter-section-path {
	color: color-mix(in srgb, var(--bs-secondary-color) 60%, var(--bs-body-bg));
	font-size: .83rem;
}

.mxn-resource-parameter-meta span:last-child {
	text-align: right;
}

.mxn-resource-parameter-type,
.mxn-resource-parameter-values {
	display: flex;
	align-items: center;
	gap: .35rem;
}

.mxn-resource-parameter-values {
	flex-wrap: wrap;
	justify-content: flex-end;
}

.mxn-resource-parameter-values > span + span::before {
	margin-right: .35rem;
	content: "\00b7";
}

.mxn-resource-cycle-badge {
	font-size: .6rem;
	color: var(--mxn-resource-muted);
	background: color-mix(in srgb, var(--mxn-resource-muted) 14%, transparent);
}

.mxn-resource-origin {
	display: block;
}

.mxn-resource-cycles {
	grid-column: 1 / -1;
	margin-top: .35rem;
	overflow-x: auto;
}

.mxn-resource-cycles table {
	width: 100%;
	border-collapse: collapse;
}

.mxn-resource-cycles th,
.mxn-resource-cycles td {
	padding: .2rem .45rem;
	text-align: left;
}

.mxn-resource-cycles .mxn-resource-symbol-control {
	gap: .35rem;
}

.mxn-resource-cycles th {
	border-bottom: 1px solid color-mix(in srgb, var(--color-border, var(--bs-border-color)) 45%, transparent);
	font-weight: var(--font-weight-medium, 600);
}

.mxn-resource-cycles tbody td,
.mxn-resource-cycles tbody td code {
	color: var(--mxn-resource-muted);
}

.mxn-resource-cycles th:first-child,
.mxn-resource-cycles td:first-child {
	width: 25%;
}

.mxn-resource-cycles th:nth-child(n + 2),
.mxn-resource-cycles td:nth-child(n + 2) {
	width: auto;
	text-align: left;
	white-space: normal;
}

.mxn-resource-cycles tbody tr + tr td {
	border-top: 1px solid color-mix(in srgb, var(--color-border, var(--bs-border-color)) 45%, transparent);
}

.mxn-resource-cycles tbody tr:last-child td {
	border-bottom: 0;
}

.mxn-resource-flags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem;
}

.mxn-resource-flags-label {
	margin: 1rem 0 .4rem;
	font-weight: var(--font-weight-medium, 600);
}

.mxn-resource-flags-hint {
	margin: .4rem 0 .7rem;
	opacity: .6;
	font-size: var(--font-size-small, .85rem);
}

.mxn-resource-card-body h3 {
	margin: 1rem 0 .4rem;
	font-size: .95rem;
}

/* --- Code Examples -----------------------------------------------------------------------------*/

.mxn-resource-code {
	position: relative;
	margin: .6rem 0;
}

.mxn-resource-code .mxn-code-copy {
	right: .75rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}

.mxn-resource-code:hover .mxn-code-copy,
.mxn-resource-code:focus-within .mxn-code-copy {
	opacity: 1;
	pointer-events: auto;
}

.mxn-resource-code pre {
	max-height: 19rem;
	margin: .5rem 0 0;
	padding: .5rem .7rem;
	overflow: auto;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	font-size: .875rem;
	line-height: var(--line-height-base, 1.5);
}

.mxn-resource-example-match {
	padding: var(--mxn-search-highlight-padding, 0 2px);
	border-radius: var(--mxn-search-highlight-radius, 3px);
	background: color-mix(in srgb, var(--mxn-search-highlight-color, var(--color-link, var(--bs-primary))) var(--mxn-search-highlight-strength), var(--mxn-search-highlight-surface, var(--color-surface, var(--bs-body-bg))));
	color: var(--mxn-search-highlight-text-color, var(--color-text, var(--bs-body-color)));
}

#mxn-resources .hljs-meta,
.mxn-resource-icon-popover .hljs-meta,
.mxn-resource-source-preview .hljs-meta {
	color: #8250df;
}

#mxn-resources .hljs-type,
.mxn-resource-icon-popover .hljs-type,
.mxn-resource-source-preview .hljs-type {
	color: #0550ae;
}

#mxn-resources .hljs-attr,
.mxn-resource-icon-popover .hljs-attr,
.mxn-resource-source-preview .hljs-attr {
	color: #953800;
}

#mxn-resources .hljs-keyword,
.mxn-resource-icon-popover .hljs-keyword,
.mxn-resource-source-preview .hljs-keyword {
	color: #cf222e;
}

#mxn-resources .mxn-resource-code code.hljs {
	background: transparent !important;
}

.mxn-resource-icon-popover .mxn-resource-code code.hljs {
	background: transparent !important;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code code.hljs,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code code.hljs {
	color: var(--color-text, var(--bs-body-color)) !important;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-comment,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-comment,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-quote,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-quote {
	color: #8b949e;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-keyword,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-keyword,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-selector-tag,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-selector-tag,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-literal,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-literal {
	color: #ff7b72;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-string,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-string,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-attr,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-attr {
	color: #a5d6ff;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-number,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-number,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-built_in,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-built_in {
	color: #79c0ff;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-title,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-title,
body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-section,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-section {
	color: #d2a8ff;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-meta,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-meta,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-meta {
	color: #d2a8ff;
}

body[data-bs-theme="dark"] #mxn-resources .mxn-resource-code .hljs-type,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-type,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-type {
	color: #79c0ff;
}

.mxn-resource-example-source {
	margin: .2rem 0 .7rem;
	padding: 0 .7rem;
	opacity: .55;
}

/* --- Icons ------------------------------------------------------------------------------------*/

.mxn-resource-icon-layout {
	min-width: 0;
}

.mxn-resource-similarity-section {
	min-width: 0;
}

.mxn-resource-similarity-heading {
	box-sizing: border-box;
	width: 100%;
	margin: .35rem 0;
	padding-right: 4.75rem;
	font-size: 1rem;
}

.mxn-resource-similarity-header {
	position: relative;
	display: flow-root;
	min-width: 0;
}

.mxn-resource-icon-grid {
	min-width: 0;
}

.mxn-resource-icon-row {
	display: grid;
	gap: .25rem;
	margin-bottom: .25rem;
}

.mxn-resource-icon-tile {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	overflow: hidden;
	padding: .25rem;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: inherit;
	cursor: pointer;
	font-size: .75rem;
}

.mxn-resource-icon-tile:hover,
.mxn-resource-icon-tile[aria-pressed="true"] {
	border-color: var(--color-link, var(--bs-primary));
	background: var(--color-surface-subtle, var(--bs-tertiary-bg));
}

.mxn-resource-icon-tile img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.mxn-resource-icon-tile-svg img {
	width: 75%;
	height: 75%;
	min-width: 0;
	min-height: 0;
	flex: 0 0 75%;
}

.mxn-resource-icon-pane {
	min-width: 0;
	margin-top: .5rem;
	padding-top: .6rem;
	border-top: 1px solid var(--color-border, var(--bs-border-color));
	overflow-wrap: anywhere;
}

.mxn-resource-icon-pane[hidden] {
	display: none;
}

.mxn-resource-similarity-controls {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	margin: .4rem 0 0;
}

.mxn-resource-similarity-button {
	font-size: .8rem;
}

.mxn-resource-similar-toolbar {
	display: flex;
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	z-index: 1;
	justify-content: flex-end;
	gap: .25rem;
	margin: 0;
}

.mxn-resource-similar-toolbar-button {
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
}

.mxn-resource-similar-toolbar-button[aria-pressed="true"] {
	color: var(--color-link, var(--bs-primary));
}

.mxn-resource-icon-popover {
	--mxn-icon-code-text: var(--color-text, var(--bs-body-color));
	--mxn-icon-code-surface: var(--color-surface, var(--bs-body-bg));
	--mxn-icon-code-comment: #6e7781;
	--mxn-icon-code-keyword: #cf222e;
	--mxn-icon-code-string: #0a3069;
	--mxn-icon-code-number: #0550ae;
	--mxn-icon-code-title: #8250df;
	--mxn-icon-code-meta: #8250df;
	--mxn-icon-code-type: #0550ae;
	position: fixed;
	inset: auto;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	width: 60vw;
	max-width: calc(100vw - 1rem);
	max-height: min(60vh, 28rem);
	margin: 0;
	padding: .7rem;
	overflow: auto;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
	box-shadow: 0 .5rem 1.5rem rgb(0 0 0 / 22%);
}

.mxn-resource-icon-popover::backdrop {
	background: rgb(0 0 0 / 55%);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover {
	--mxn-icon-code-comment: #8b949e;
	--mxn-icon-code-keyword: #ff7b72;
	--mxn-icon-code-string: #a5d6ff;
	--mxn-icon-code-number: #79c0ff;
	--mxn-icon-code-title: #d2a8ff;
	--mxn-icon-code-meta: #d2a8ff;
	--mxn-icon-code-type: #79c0ff;
}

.mxn-resource-icon-popover-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	margin-bottom: .5rem;
}

.mxn-resource-icon-popover-title {
	font-weight: 600;
}

.mxn-resource-icon-popover-close {
	display: grid;
	flex: 0 0 2rem;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: var(--radius-normal, 4px);
	background: transparent;
	color: inherit;
}

.mxn-resource-icon-popover-close:hover,
.mxn-resource-icon-popover-close:focus-visible {
	background: var(--color-surface-hover, var(--bs-secondary-bg));
}

.mxn-resource-icon-popover .mxn-resource-code {
	margin: 0;
}

.mxn-resource-icon-popover .mxn-resource-code pre {
	box-sizing: border-box;
	min-height: calc(7.5em + 1rem + 2px);
	max-height: calc(100vh - 12rem);
	line-height: 1.5;
	overflow: auto;
	background: var(--mxn-icon-code-surface);
	color: var(--mxn-icon-code-text);
}

.mxn-resource-icon-popover .mxn-resource-code code.hljs {
	background: transparent !important;
	color: var(--mxn-icon-code-text) !important;
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-comment,
.mxn-resource-icon-popover .mxn-resource-code .hljs-quote {
	color: var(--mxn-icon-code-comment);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-keyword,
.mxn-resource-icon-popover .mxn-resource-code .hljs-selector-tag,
.mxn-resource-icon-popover .mxn-resource-code .hljs-literal {
	color: var(--mxn-icon-code-keyword);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-string,
.mxn-resource-icon-popover .mxn-resource-code .hljs-attr {
	color: var(--mxn-icon-code-string);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-number,
.mxn-resource-icon-popover .mxn-resource-code .hljs-built_in {
	color: var(--mxn-icon-code-number);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-title,
.mxn-resource-icon-popover .mxn-resource-code .hljs-section {
	color: var(--mxn-icon-code-title);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-meta {
	color: var(--mxn-icon-code-meta);
}

.mxn-resource-icon-popover .mxn-resource-code .hljs-type {
	color: var(--mxn-icon-code-type);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-comment,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-quote {
	color: var(--mxn-icon-code-comment);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-keyword,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-selector-tag,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-literal {
	color: var(--mxn-icon-code-keyword);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-string,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-attr {
	color: var(--mxn-icon-code-string);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-number,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-built_in {
	color: var(--mxn-icon-code-number);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-title,
body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-section {
	color: var(--mxn-icon-code-title);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-meta {
	color: var(--mxn-icon-code-meta);
}

body[data-bs-theme="dark"] .mxn-resource-icon-popover .mxn-resource-code .hljs-type {
	color: var(--mxn-icon-code-type);
}

.mxn-resource-icon-popover .mxn-code-copy {
	opacity: 1;
	pointer-events: auto;
}

.mxn-resource-icon-grid > .mxn-resource-empty {
	grid-column: 1 / -1;
	width: 100%;
	min-width: 0;
	white-space: normal;
	overflow-wrap: anywhere;
}

.mxn-resource-icon-pane h2 {
	font-size: 1.05rem;
}

.mxn-resource-icon-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem;
	margin-top: .5rem;
}

.mxn-resource-icon-disclosure[hidden] {
	display: none;
}

.mxn-resource-icon-disclosure {
	min-width: 0;
	margin-top: .35rem;
}

.mxn-resource-icon-large {
	width: 2rem;
	height: 2rem;
	flex: 0 0 2rem;
	margin: 0;
	object-fit: contain;
}

.mxn-resource-icon-preview-head,
.mxn-resource-icon-meta {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .2rem;
}

.mxn-resource-icon-preview-head {
	min-height: 2rem;
}

.mxn-resource-icon-placeholder {
	display: inline-flex;
	width: 2rem;
	height: 2rem;
	flex: 0 0 2rem;
	align-items: center;
	justify-content: center;
	font-size: .75rem;
}

.mxn-resource-icon-separator {
	color: var(--mxn-resource-muted);
}

.mxn-resource-icon-meta {
	flex-direction: column;
	align-items: stretch;
	gap: .5rem;
	margin: .4rem 0 0;
	font-size: .8rem;
}

.mxn-resource-icon-meta-row {
	align-items: center;
}

.mxn-resource-icon-meta-content {
	display: flex;
	min-width: 0;
	align-items: center;
	gap: .4rem;
}

.mxn-resource-icon-meta-value {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.mxn-resource-icon-meta-path {
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	direction: rtl;
}

.mxn-resource-icon-copy {
	flex: 0 0 auto;
	font-size: .8em;
	color: var(--color-text-muted, var(--bs-secondary-color));
}

.mxn-resource-icon-code-copy {
	margin-left: auto;
}

.mxn-resource-similarity-summary {
	margin: .65rem 0 0;
	color: var(--color-text-muted, var(--bs-secondary-color));
	font-size: .8rem;
}

.mxn-resource-window-spacer {
	grid-column: 1 / -1;
	pointer-events: none;
}

/* --- Source Viewer ----------------------------------------------------------------------------*/

/* --- Node Templates ---------------------------------------------------------------------------*/

.mxn-node-sidebar-controls[hidden],
#mxn-node-root[hidden] {
	display: none;
}

.mxn-node-sidebar-controls {
	margin-top: .75rem;
}

.mxn-node-sidebar-controls input,
.mxn-node-sidebar-controls select {
	width: 100%;
	min-width: 0;
	min-height: 2.25rem;
	padding: .3rem .55rem;
	border: 1px solid var(--color-control-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
}

#mxn-node-count {
	padding: 0;
}

.mxn-resource-results-bar,
#mxn-node-count {
	color: color-mix(in srgb, var(--bs-secondary-color) 60%, var(--bs-body-bg));
	font-size: var(--font-size-small, .85rem);
}

#mxn-node-root .mxn-node-header-row {
	height: 3rem;
	min-height: 3rem;
}

#mxn-node-root .mxn-node-header-row > .mxn-card-header {
	display: flex;
	height: 3rem;
	align-items: center;
	min-height: 0;
}

#mxn-node-root .mxn-node-header-row > .mxn-card-header.font-monospace {
	min-width: 0;
	max-width: 45%;
	overflow: hidden;
	text-overflow: ellipsis;
}

#mxn-node-root .mxn-node-header-row > .mxn-card-header:hover {
	background: transparent;
}

#mxn-node-root .mxn-node-chevron {
	transition: transform .15s;
}

#mxn-node-root [data-bs-toggle="collapse"][aria-expanded="false"] .mxn-node-chevron,
#mxn-node-root [data-mxn-card-toggle][aria-expanded="false"] .mxn-node-chevron {
	transform: rotate(-90deg);
}

#mxn-node-root .mxn-node-icon,
#mxn-node-root .mxn-node-icon-ph {
	display: inline-flex;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	align-items: center;
	justify-content: center;
	object-fit: contain;
}

#mxn-node-root .mxn-resource-card-body .mxn-copyable {
	overflow-wrap: anywhere;
}

#mxn-node-root .mxn-node-attribute-id {
	max-width: 65%;
	min-width: 0;
	overflow: hidden;
	direction: rtl;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#mxn-node-root .mxn-node-attribute-id-value {
	direction: ltr;
	unicode-bidi: isolate;
}

#mxn-node-root .mxn-node-attribute-label {
	min-width: 0;
	flex: 1 1 auto;
}

#mxn-node-root .mxn-node-attribute-filter {
	min-width: 0;
	border-color: var(--color-control-border, var(--bs-border-color));
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
}

#mxn-node-root .mxn-node-tree-section-header {
	font-style: italic;
}

#mxn-node-root .mxn-copy-btn {
	flex-shrink: 0;
}

#mxn-node-root .mxn-opacity-faint {
	opacity: .35;
}

#mxn-node-root .mxn-opacity-faint:hover,
#mxn-node-root .mxn-opacity-faint:focus-visible {
	opacity: 1;
}

#mxn-node-root .mxn-node-direct-section-inner {
	padding-left: .35rem;
}

#mxn-node-root .mxn-node-enum-values {
	color: color-mix(in srgb, var(--bs-secondary-color) 60%, var(--bs-body-bg));
	font-size: .83rem;
}

#mxn-node-root .mxn-node-enum-values th,
#mxn-node-root .mxn-node-enum-values td {
	font-size: .875em;
}

#mxn-node-root .mxn-node-attribute-meta,
#mxn-node-root .mxn-node-attribute-meta *:not(.mxn-node-highlight),
#mxn-node-root .mxn-node-enum-values,
#mxn-node-root .mxn-node-enum-values *:not(.mxn-node-highlight) {
	color: var(--mxn-resource-muted) !important;
}

.mxn-data-row {
	align-items: baseline;
}

#mxn-node-root .mxn-data-row > :first-child {
	min-width: 0;
	flex: 1 1 auto;
}

#mxn-node-root .mxn-data-row > :last-child {
	flex: 0 1 auto;
}

#mxn-node-root .mxn-data-row .badge {
	border: 0;
	background: color-mix(in srgb, var(--mxn-resource-muted) 14%, transparent);
	color: var(--mxn-resource-muted);
	font-size: .6rem;
}

#mxn-node-root .mxn-node-enum-values {
	margin-top: .35rem;
}

#mxn-node-root .mxn-node-enum-values .mxn-copy-btn {
	font-size: inherit;
	line-height: 1;
}

#mxn-node-root .mxn-node-enum-values .fw-semibold {
	color: var(--color-text-muted, var(--bs-secondary-color));
}

#mxn-node-root .mxn-node-enum-values .row:not(.fw-semibold) {
	border-top: 1px solid color-mix(in srgb, var(--color-border, var(--bs-border-color)) 45%, transparent);
}

#mxn-node-root .mxn-node-enum-values .row > div {
	padding-top: .2rem;
	padding-bottom: .2rem;
}

#mxn-node-root .mxn-node-code-wrap {
	position: relative;
}

#mxn-node-root .mxn-node-code-copy {
	position: absolute;
	top: .4rem;
	right: .4rem;
	z-index: 1;
}

#mxn-node-root .nav-tabs .nav-link {
	color: var(--color-text-muted, var(--bs-secondary-color));
}

#mxn-node-root .nav-tabs .nav-link.active {
	color: var(--color-text, var(--bs-body-color));
}

#mxn-node-root mark.mxn-node-highlight,
#mxn-resources mark.mxn-node-highlight {
	padding: var(--mxn-search-highlight-padding, 0 2px);
	border-radius: var(--mxn-search-highlight-radius, 3px);
	background: color-mix(in srgb, var(--mxn-search-highlight-color, var(--color-link, var(--bs-primary))) var(--mxn-search-highlight-strength), var(--mxn-search-highlight-surface, var(--color-surface, var(--bs-body-bg))));
	color: var(--mxn-search-highlight-text-color, var(--color-text, var(--bs-body-color)));
}

#mxn-node-root mark.mxn-node-filter-highlight,
#mxn-resources mark.mxn-node-filter-highlight {
	padding: var(--mxn-search-highlight-padding, 0 2px);
	border-radius: var(--mxn-search-highlight-radius, 3px);
	background: color-mix(in srgb, var(--mxn-search-filter-highlight-color, var(--bs-warning)) var(--mxn-search-filter-highlight-strength), var(--mxn-search-highlight-surface, var(--color-surface, var(--bs-body-bg))));
	color: var(--mxn-search-highlight-text-color, var(--color-text, var(--bs-body-color)));
}

#mxn-node-root .hljs {
	background: var(--color-code-background, var(--bs-tertiary-bg));
	color: var(--color-text, var(--bs-body-color));
}

body[data-bs-theme="dark"] #mxn-node-root .hljs-comment { color: #8b949e; }
body[data-bs-theme="dark"] #mxn-node-root .hljs-keyword { color: #ff7b72; }
body[data-bs-theme="dark"] #mxn-node-root .hljs-string { color: #a5d6ff; }
body[data-bs-theme="dark"] #mxn-node-root .hljs-number { color: #79c0ff; }
body[data-bs-theme="dark"] #mxn-node-root .hljs-title { color: #d2a8ff; }

@media (max-width: 600px) {
	#mxn-node-root .mxn-node-header-row > .mxn-card-header.font-monospace {
		display: none;
	}

	#mxn-node-root .mxn-node-header-row > .mxn-copy-btn {
		display: none;
	}

	#mxn-node-root .mxn-resource-card-body > .mb-4 > .row.g-0 > .col-2,
	#mxn-node-root .mxn-resource-card-body > .mb-4 > .row.g-0 > .col-10 {
		width: 100%;
	}
}

#mxn-resource-source-dialog {
	width: 90vw;
	max-width: 90vw;
	height: 90vh;
	max-height: 90vh;
	box-sizing: border-box;
	overflow: hidden;
	padding: 0;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
}

#mxn-resource-source-dialog::backdrop {
	background: rgb(0 0 0 / 55%);
}

#mxn-resource-help-dialog {
	width: min(42rem, 90vw);
	max-height: 85vh;
	box-sizing: border-box;
	overflow: auto;
	padding: 0;
	border: 1px solid var(--color-border, var(--bs-border-color));
	border-radius: var(--radius-normal, 4px);
	background: var(--color-surface, var(--bs-body-bg));
	color: var(--color-text, var(--bs-body-color));
}

#mxn-resource-help-dialog::backdrop {
	background: rgb(0 0 0 / 55%);
}

.mxn-resource-help-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.5rem;
	border-bottom: 1px solid var(--color-border, var(--bs-border-color));
}

#mxn-resource-help-title {
	margin: 0;
	border-bottom: 0;
	padding-bottom: 0;
	font-size: 1.15rem;
}

.mxn-resource-help-dialog-header button {
	flex: 0 0 auto;
	border: 0;
	background: transparent;
	color: inherit;
}

.mxn-resource-help-dialog-content {
	padding: 1.5rem;
}

.mxn-resource-help-dialog-content strong {
	font-weight: 600;
}

.mxn-resource-help-dialog-content p {
	margin: 0 0 .75rem;
}

.mxn-resource-help-dialog-content ul {
	margin: 0;
	padding-left: 1.25rem;
}

.mxn-resource-help-dialog-content li + li {
	margin-top: .5rem;
}

.mxn-resource-dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .65rem 1rem;
	border-bottom: 1px solid var(--color-border, var(--bs-border-color));
	overflow-wrap: anywhere;
	min-height: 3.5rem;
	box-sizing: border-box;
}

.mxn-resource-dialog-header button {
	flex-shrink: 0;
	border: 0;
	background: transparent;
	color: inherit;
	cursor: pointer;
	font-size: 1.5rem;
}

.mxn-resource-dialog-content {
	display: grid;
	grid-template-columns: minmax(12rem, 22%) minmax(0, 1fr);
	height: calc(90vh - 3.5rem);
	min-height: 0;
	box-sizing: border-box;
}

.mxn-resource-source-files {
	min-height: 0;
	padding: .5rem;
	border-right: 1px solid var(--color-border, var(--bs-border-color));
	overflow: auto;
}

.mxn-resource-source-file {
	display: block;
	width: 100%;
	padding: .4rem .5rem;
	border: 0;
	border-radius: var(--radius-normal, 4px);
	background: transparent;
	color: var(--color-text-muted, var(--bs-secondary-color));
	text-align: left;
	overflow-wrap: anywhere;
}

.mxn-resource-source-file:hover,
.mxn-resource-source-file:focus-visible,
.mxn-resource-source-file[aria-pressed="true"] {
	background: var(--color-surface-emphasis, var(--bs-secondary-bg));
	color: var(--color-text, var(--bs-body-color));
}

.mxn-resource-source-preview {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: var(--color-code-background, var(--bs-tertiary-bg));
	overflow: hidden;
}

.mxn-resource-source-toolbar {
	display: flex;
	flex: 0 0 2.5rem;
	align-items: center;
	justify-content: flex-end;
	padding: 0 .75rem;
	border-bottom: 1px solid var(--color-border, var(--bs-border-color));
}

.mxn-resource-source-toolbar button {
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--color-text, var(--bs-body-color));
	cursor: pointer;
}

.mxn-resource-source-scroll {
	display: flex;
	flex: 1 1 auto;
	align-items: stretch;
	min-width: 0;
	min-height: 0;
	overflow: auto;
}

.mxn-resource-source-scroll pre {
	align-self: flex-start;
	flex-shrink: 0;
	margin: 0;
	padding: .75rem;
	overflow: visible;
	background: transparent;
	color: var(--color-text, var(--bs-body-color));
	white-space: pre;
	font-size: inherit;
	line-height: 1.5;
}

.mxn-resource-source-line-numbers {
	position: sticky;
	left: 0;
	z-index: 1;
	flex: 0 0 auto;
	min-width: 3.5em;
	border-right: 1px solid var(--color-border, var(--bs-border-color));
	background: var(--color-code-background, var(--bs-tertiary-bg)) !important;
	color: var(--color-text-muted, var(--bs-secondary-color)) !important;
	text-align: right;
	user-select: none;
}

.mxn-resource-source-code {
	flex: 0 0 auto;
	min-width: max-content;
}

.mxn-resource-source-code code {
	display: block;
	min-width: max-content;
	overflow: visible;
	tab-size: 2;
}

.mxn-resource-source-code code.hljs {
	background: transparent;
	color: var(--color-text, var(--bs-body-color));
	padding: 0;
	overflow: visible !important;
}

.mxn-resource-source-code mark.mxn-resource-source-match {
	padding: var(--mxn-search-highlight-padding, 0 2px);
	border-radius: var(--mxn-search-highlight-radius, 3px);
	background: color-mix(in srgb, var(--mxn-search-highlight-color, var(--color-link, var(--bs-primary))) var(--mxn-search-highlight-strength), var(--mxn-search-highlight-surface, var(--color-surface, var(--bs-body-bg))));
	color: var(--mxn-search-highlight-text-color, var(--color-text, var(--bs-body-color)));
}

body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-comment,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-quote {
	color: #8b949e;
}

body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-keyword,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-selector-tag,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-literal {
	color: #ff7b72;
}

body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-string,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-attr {
	color: #a5d6ff;
}

body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-number,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-built_in {
	color: #79c0ff;
}

body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-title,
body[data-bs-theme="dark"] .mxn-resource-source-preview .hljs-section {
	color: #d2a8ff;
}

@media (max-width: 1589px) {
	.mxn-content:has(#mxn-resources) {
		display: flex;
		flex-direction: column;
	}

	.mxn-sidebar:has(.mxn-sidebar-controls) {
		display: flex;
		width: 100%;
		height: auto;
		position: static;
		margin: 0;
	}

	.mxn-sidebar-controls {
		min-height: 0;
	}

	.mxn-sidebar-help-toggle {
		position: static;
		margin-top: .5rem;
		align-self: flex-end;
	}

	.mxn-scroll:has(#mxn-resources) {
		display: block;
		overflow: visible;
	}
}

/* --- Responsive Layout -------------------------------------------------------------------------*/

@media (max-width: 760px) {
	.mxn-resource-dialog-content {
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: 7rem minmax(0, 1fr);
	}

	.mxn-resource-source-files {
		display: flex;
		max-height: none;
		border-right: 0;
		border-bottom: 1px solid var(--color-border, var(--bs-border-color));
		gap: .25rem;
	}

	.mxn-resource-source-file {
		width: auto;
		flex: 0 0 auto;
	}

	.mxn-resource-icon-layout {
		gap: .35rem;
	}

	.mxn-resource-card-header {
		flex-wrap: nowrap;
	}

	.mxn-resource-card-count {
		margin-left: auto;
	}
}

