src/styles/components/_site-nav.scss


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

@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;
		}
	}
}