@import "./reset.css";
@import "./variables.css";

html {
	background: var(--sb-background-color);
	font-optical-sizing: auto;
	font-family: var(--sb-font-text);
	overflow-x: hidden;

	scrollbar-color: color-mix(
			in hsl,
			var(--sb-background-color) 50%,
			var(--sb-tint-color-opposite)
		)
		color-mix(
			in hsl,
			var(--sb-background-color) 95%,
			var(--sb-tint-color-opposite)
		);
}

code {
	font-family: var(--sb-font-mono) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--sb-font-headings);
}

article *[id] {
	scroll-margin-top: 5rem;
}

@media screen and (max-width: 1100px) {
	article *[id] {
		scroll-margin-top: 7.5rem;
	}
}

.expressive-code.expressive-code {
	margin: 1.5rem 0;

	figure {
		--code-background: var(--sb-code-background-color);
		--ec-frm-edActTabBg: var(--sb-code-background-color);
		--ec-frm-edTabBarBrdCol: var(--sb-code-background-color);
		--ec-frm-edTabBarBg: var(--sb-background-color);
		--ec-frm-edActTabIndTopCol: var(--sb-active-link-color);
		--ec-frm-edActTabIndBtmCol: color-mix(
			in hsl,
			var(--sb-code-background-color) 95%,
			var(--sb-tint-color-opposite)
		);
		--ec-frm-edTabBarBrdBtmCol: var(--ec-frm-edActTabIndBtmCol);
		--ec-frm-edActTabFg: var(--sb-text-color);
		--header-border-radius: var(--sb-border-radius);
		--ec-brdRad: var(--sb-border-radius);
		box-shadow: none;
		border-radius: var(--sb-border-radius);
		cursor: text;

		pre {
			border: none;
		}

		.header .title {
			font-family: var(--sb-font-mono);
			font-size: 0.9rem;
		}

		.copy {
			margin-top: 0.2rem;
		}

		.ln[aria-hidden="true"]::selection {
			background: transparent;
		}

		&:has(.ec-line.highlight) .ec-line:not(.highlight) {
			opacity: 0.7;
			transition: opacity .1s var(--sb-transition-timing);
		}

		&:hover .ec-line,
		&:focus-within .ec-line {
			opacity: 1 !important;
		}
	}
}