/*
	Color palettes are generated via:
	https://starlight.astro.build/guides/css-and-tailwind/#color-theme-editor
*/

/* Dark mode colors. */
:root {
	--sl-color-accent-low: #00234c;
	--sl-color-accent: #0067c9;
	--sl-color-accent-high: #a4ccff;
	--sl-color-white: #ffffff;
	--sl-color-gray-1: #eceef2;
	--sl-color-gray-2: #c0c2c7;
	--sl-color-gray-3: #888b96;
	--sl-color-gray-4: #545861;
	--sl-color-gray-5: #353841;
	--sl-color-gray-6: #24272f;
	--sl-color-black: #17181c;
}

/* Light mode colors. */
:root[data-theme='light'] {
	--sl-color-accent-low: #bddaff;
	--sl-color-accent: #0069cd;
	--sl-color-accent-high: #003166;
	--sl-color-white: #17181c;
	--sl-color-gray-1: #24272f;
	--sl-color-gray-2: #353841;
	--sl-color-gray-3: #545861;
	--sl-color-gray-4: #888b96;
	--sl-color-gray-5: #c0c2c7;
	--sl-color-gray-6: #eceef2;
	--sl-color-gray-7: #f5f6f8;
	--sl-color-black: #ffffff;
}

/*
	This restores proper width on the index page,
	which uses the `template: doc` in combination
	with a hero element, sidebar, and a disabled ToC (table of contents)
*/
html[data-has-hero] {
	--sl-content-width: 67.5rem;
}

/* Clip the right side of the view */
.fifty {
	clip-path: inset(0 0 0 50%);
}

/* Add bigger margin between steps. */
.sl-steps>li+li {
	margin-top: 1.25rem;
}

/* Add an autolink '#' to headings */

h1 .autolink-header,
h5 .autolink-header,
h6 .autolink-header {
	display: none;
}

h2:hover .autolink-header,
h3:hover .autolink-header,
h4:hover .autolink-header {
	opacity: 1;
}

.autolink-header {
	opacity: 0;
	transition: opacity 0.1s ease-in-out;
	margin-left: 4px;
	text-decoration: none;
}

.autolink-header::after {
	content: '#';
	color: #7d8080;
	padding-left: 0.25rem;
	padding-right: 0.25rem;
}

:root[data-theme~='light'] .autolink-header::after {
	color: #acaeae;
}

/* # */

/* Disable bold fonts on nested group labels */
ul ul div.group-label>span.large {
	font-size: var(--sl-text-sm);
	font-weight: inherit;
	color: inherit;
}

/* Add a sidebar separator */
.sidebar-separator {
	margin-top: 1rem;
	font-weight: 600;
	pointer-events: none;
}

/* Prevent work breaks in inline code items in tables */
td>code,
td>a>code {
	white-space: nowrap;
}

/* Prevent inline code snippets from changing background color */
code:not(pre *) {
	background-color: var(--sl-color-bg-inline-code) !important;
}

/* Stylizing <a> links to Web IDE */
.web-ide-link {
	display: flex;
	justify-content: right;
	text-decoration: none;
	margin-top: 0.25rem;
	margin-bottom: 1rem;
}

/* Stylizing <span> tags inside <a> links to Web IDE */
.web-ide-link-span {
	/* from .sl-badge */
	display: inline-block;
	border: 1px solid var(--sl-color-border-badge);
	border-radius: 0.25rem;
	font-family: var(--sl-font-system-mono);
	line-height: normal;
	color: var(--sl-color-text-badge);
	background-color: var(--sl-color-bg-badge);
	overflow-wrap: anywhere;

	/* from .default */
	--sl-color-bg-badge: var(--sl-badge-default-bg);
	--sl-color-border-badge: var(--sl-badge-default-border);
	--sl-color-text-badge: var(--sl-badge-default-text);

	/* from .small */
	font-size: var(--sl-text-xs);
	padding: 0.125rem 0.25rem;
}
