@use "sass:meta";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "../props" as *;
@use "icon.vars" as icon;

@forward "menu.vars";
@use "menu.vars" as vars;

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

	@include bem.object("menu") {
		display: flex;
		flex-direction: column;
		gap: props.get(vars.$spacing);

		@include bem.elem("header") {
			padding-block: props.get(vars.$item--pad-b);
			padding-inline: props.get(vars.$item--pad-i);
			font-size: props.get(vars.$header--font-size);
			font-weight: 500;
			color: props.get(vars.$header--label-color);
			text-transform: uppercase;
			letter-spacing: 0.5px;

			@include bem.next-twin-elem {
				margin-block-start: calc(
					props.get(vars.$separator-width) + props.get(vars.$spacing)
				);
			}
		}

		@include bem.elem("item") {
			padding-block: props.get(vars.$item--pad-b);
			padding-inline: props.get(vars.$item--pad-i);
			margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
			color: props.get(vars.$item--disabled--label-color);
			background-clip: padding-box;
			border: props.get(vars.$item--key-focus--outline-width) solid transparent;
			border-radius: calc(
				props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width)
			);

			&:link,
			&:visited,
			&:enabled {
				color: currentColor;

				@include bem.multi("&:hover, &:focus-visible", "is" "selected") {
					color: props.get(vars.$item--hover--label-color);
					background-color: props.get(vars.$item--hover--bg-color);
				}

				&:active {
					color: props.get(vars.$item--active--label-color);
					background-color: props.get(vars.$item--active--bg-color);
				}

				&:focus-visible {
					outline: props.get(vars.$item--key-focus--border-color) solid
						props.get(vars.$item--key-focus--border-width);
					box-shadow: 0 0 0
						calc(
							props.get(vars.$item--key-focus--border-width) +
								props.get(vars.$item--key-focus--outline-width)
						)
						props.get(vars.$item--key-focus--outline-color);
				}
			}

			@include bem.next-elem("header") {
				margin-block-start: calc(
					props.get(vars.$separator-width) + props.get(vars.$spacing)
				);
			}
		}

		@include bem.elem("header") {
			&:link,
			&:visited,
			&:enabled {
				color: props.get(vars.$header--label-color);
			}
		}

		@include bem.elem("separator") {
			block-size: 1px;
			margin-block: props.get(vars.$separator-width);
			margin-inline: props.get(vars.$item--pad-i);
			background-color: props.get(vars.$separator-color);
		}

		@include bem.elem("slot") {
			padding-block: props.get(vars.$item--pad-b);
			padding-inline: props.get(vars.$item--pad-i);
		}

		@include bem.elem("icon-slot") {
			display: flex;
			justify-content: center;
			inline-size: props.get(icon.$size);
		}

		@include bem.modifier("pull") {
			margin: calc(-1 * props.get(vars.$item--pad-i));
		}
	}
}