@use "sass:math";
@use "sass:meta";

@use "pkg:iro-design" as iro;
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";

@mixin styles {
	@include bem.component("site-nav-placeholder") {
		block-size: props.get(iro.$o-navbar--block-size);

		@include iro.media--media(">sm") {
			display: none;
		}
	}

	@include bem.component("site-nav") {
		position: fixed;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: calc(props.get(iro.$o-backdrop--z-index) - 10);
		background-color: props.get(iro.$core--transparent-colors, --black, --900);
		//border-block-start: 1px solid props.get(iro.$core--theme, --border-mute);
		overflow-x: auto;

		@include iro.media--media(">sm") {
			display: none;
		}
	}
}