@use "sass:map";
@use "sass:math";
@use "pkg:iro-sass/props";
@use "pkg:iro-sass/functions" as fn;
@use "pkg:iro-sass/easing" as easing;
@use "pkg:iro-design/config.defaults" as defaults;

$font--standard--family: props.def(
	--font--standard--family,
	(
		"Inter",
		"Open Sans",
		"Segoe UI",
		"Droid Sans",
		Roboto,
		Oxygen,
		"Helvetica Neue",
		Helvetica,
		Tahoma,
		Arial,
		sans-serif
	)
);

@use "pkg:iro-design/core.vars" as core;

@use "./components/site-header.vars" as site-header;

@use "pkg:iro-design/layouts/split-view.vars" with (
	$panel--sticky-offset: props.def(
		--l-split-view--panel--sticky-offset,
		calc(props.get(site-header.$block-size) + props.get(core.$size--400))
	)
);

@forward "pkg:iro-design";

@forward "objects/deflist" as o-deflist--*;
@forward "objects/message" as o-message--*;
@forward "objects/placeholder-box" as o-placeholder-box--*;
@forward "objects/toc" as o-toc--*;

@forward "components/home-banner" as c-home-banner--*;
@forward "components/logo" as c-logo--*;
@forward "components/site-header" as c-site-header--*;
@forward "components/site-nav" as c-site-nav--*;
@forward "components/site-footer" as c-site-footer--*;
@forward "components/subtitle" as c-subtitle--*;
@forward "components/visited-indicator" as c-visited-indicator--*;

@use "pkg:iro-design" as iro;

@mixin styles {
	@font-face {
		font-family: "Inter";
		font-style: normal;
		font-weight: 50 950;
		font-display: swap;
		src: url(load("/assets/InterVariable.woff2")) format("woff2-variations");
		font-feature-settings: "ss01";
	}

	@font-face {
		font-family: "Inter";
		font-style: italic;
		font-weight: 50 950;
		font-display: swap;
		src: url(load("/assets/InterVariable-Italic.woff2")) format("woff2-variations");
		font-feature-settings: "ss01";
	}

	html {
		scroll-behavior: smooth;
		scroll-padding-block-start: props.get(site-header.$block-size);
		scrollbar-gutter: stable;
		min-block-size: 100%;
		display: flex;
	}

	body {
		inline-size: 100%;
	}

	[x-cloak] {
		display: none;
	}
}