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

@forward "hlist.vars";
@use "hlist.vars" as vars;
@use "../objects/button.vars" as button;

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

	@include bem.layout("hlist") {
		display: inline-flex;
		flex-wrap: wrap;
		gap: props.get(vars.$gap);

		@each $mod, $size in vars.$sizes {
			@include bem.modifier($mod) {
				gap: props.get($size);

				@include bem.modifier("separated") {
					@include bem.elem("item") {
						@include bem.next-twin-elem {
							&::before {
								content: "·";
								margin-inline: calc(0.65 * props.get($size));
							}
						}
					}
				}
			}
		}

		@include bem.modifier("separated") {
			gap: 0;

			@include bem.elem("item") {
				@include bem.next-twin-elem {
					&::before {
						content: "·";
						margin-inline: calc(0.65 * props.get(vars.$gap));
					}
				}
			}
		}

		@include bem.modifier("buttons") {
			margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));

			@include bem.modifier("pill") {
				margin-inline: calc(
					-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)
				);
			}

			@include bem.modifier("icon") {
				margin-inline: calc(
					-1 * props.get(button.$pad-b) - props.get(button.$border-width) - 0.5em *
						(props.get(button.$line-height) - 1)
				);
			}

			@each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes
			{
				@include bem.modifier("buttons-#{$mod}") {
					margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));

					@include bem.modifier("pill") {
						margin-inline: calc(
							-1 * props.get($pad-i-pill) - props.get(button.$border-width)
						);
					}

					@include bem.modifier("icon") {
						margin-inline: calc(
							-1 * props.get($pad-b) - props.get(button.$border-width) - 0.5em *
								(props.get(button.$line-height) - 1)
						);
					}
				}
			}
		}
	}
}