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

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

@forward "site-header.vars";
@use "site-header.vars" as vars;

@mixin styles {
	@include iro.props--materialize-at-root(meta.module-variables("vars"));

	@include bem.component("site-header") {
		position: sticky;
		inset-block-start: 0;
		z-index: props.get(vars.$z-index);
		display: flex;
		gap: props.get(vars.$spacing);
		align-items: center;
		line-height: 1.4;
		block-size: props.get(vars.$block-size);
		padding-inline: props.get(iro.$l-container--pad-i);
		background-color: props.get(iro.$core--theme, --bg-l1);
		overflow: hidden;
		transition:
			background-color 0.2s ease,
			opacity 0.2s ease,
			transform 0.2s ease,
			visibility 0s linear 0.2s;

		@include bem.at-theme("js") {
			background-color: transparent;
		}

		@include bem.modifier("hidden") {
			margin-block-start: calc(-1 * props.get(vars.$block-size));
			opacity: 0;
			visibility: hidden;
			transform: translateY(-0.2em);

			@include bem.is("scroll") {
				transition:
					background-color 0.2s ease,
					opacity 0.2s ease,
					transform 0.2s ease,
					visibility 0s linear;
				visibility: visible;
				opacity: 1;
				transform: none;
			}
		}

		@include bem.modifier("end") {
			background-color: props.get(iro.$core--transparent-colors, --black, --900);
		}

		@include bem.is("scroll") {
			background-color: props.get(iro.$core--theme, --base, --50);
		}

		@include bem.elem("logo") {
			@include bem.modifier("sm") {
				display: none;
			}
		}

		@include bem.elem("nav", "back") {
			margin-inline-end: calc(-1 * props.get(vars.$nav-pull));
		}

		@include bem.elem("back") {
			display: none;
		}

		@include bem.elem("spacer") {
			margin-inline-start: auto;
		}

		@include bem.elem("slot") {
			display: contents;

			@include bem.modifier("sm") {
				display: none;
			}
		}

		@include iro.media--media("<=sm") {
			@include bem.elem("logo") {
				display: none;

				@include bem.modifier("sm") {
					display: block;
				}
			}

			@include bem.elem("nav") {
				display: none;
			}

			@include bem.elem("back") {
				display: block;
			}

			@include bem.elem("slot") {
				@include bem.modifier("end") {
					display: none;
				}

				@include bem.modifier("sm") {
					display: contents;
				}
			}

			@include bem.modifier("end") {
				@include bem.elem("logo") {
					display: block;

					@include bem.modifier("sm") {
						display: none;
					}
				}

				@include bem.elem("slot") {
					@include bem.modifier("sm") {
						display: none;
					}
				}
			}
		}

		@include iro.media--media("height<=500px") {
			position: relative;
		}
	}
}