@import "tokens/ui.css" layer(tokens);
@import "content.css";
@import "icons.css";
@import "outline.css";
@import "code.css";
@import "layout.css";
@import "sidebar.css";
@import "utils.css";

/* Added by plugins */
@import url('breadcrumbs.css');
@import url('callouts.css');
@import url('callout-types.css');
@import url('edit-link.css');
@import url('last-updated.css');
@import url('outline.css');
@import url('pager.css');
@import url('extras.css');
@import url('code-demo.css');


html {
	font: 1em/1.5 var(--font-body);
	accent-color: var(--docs-color-accent);
	color-scheme: light dark;
	background: var(--docs-background-page);
}

body > header {
	background-color: var(--docs-background-page);
	border-block-end: var(--docs-header-border, var(--docs-border));

	.logo {
		font-weight: 600;
	}

	.repo.icon {
		font-size: 1lh;

		&:not(:focus, :hover) {
			opacity: 0.7;
		}

		&[href*="github.com"] {
			--icon: var(--icon-github);
			color: light-dark(black, white);
		}
	}
}

#sidebar-secondary {
	@media (width <= 768px) {
		background-color: var(--docs-background-page);
		border-block-end: var(--docs-header-border, var(--docs-border));
	}
}

main,
.docs-content {
	contain: inline-size;
	container: main / inline-size;

	&,
	& > section,
	& > section > section,
	& > section > section > section,
	& > section > section > section > section,
	& > section > section > section > section > section {
		display: flex;
		flex-flow: column;
		gap: var(--size-s);
	}

	:where(&) {
		> *,
		:where(p, h2, h3, h4, h5, h6) {
			margin-block: 0;
		}
	}
}

main {
	/* Content footer */
	footer {
		font-size: var(--font-size-s);
		padding-block-start: var(--size-2xl);
		margin-block-start: auto;

		.inline {
			display: flex;
			gap: var(--size-s);
			align-items: baseline;
			justify-content: space-between;
		}
	}
}