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

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

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

	@include bem.object("tabbar") {
		min-inline-size: 0;
		block-size: props.get(vars.$block-size);
		overflow: hidden;

		&::after {
			display: block;
			block-size: props.get(vars.$border--width);
			margin-block-start: calc(-1 * props.get(vars.$border--width));
			content: "";
			background-color: props.get(vars.$railing--bg-color);
		}

		@include bem.elem("tabs") {
			display: flex;
			block-size: 100%;
			overflow-inline: auto;
		}

		@include bem.modifier("quiet") {
			box-shadow: none;
		}

		@include bem.modifier("adapt") {
			block-size: 100%;
		}

		@include bem.modifier("snap") {
			scroll-snap-align: start;
		}

		@include bem.elem("tab") {
			position: relative;
			display: flex;
			align-items: center;
			padding-inline: calc(0.5 * props.get(vars.$spacing));
			margin-inline: calc(-0.5 * props.get(vars.$spacing));
			color: props.get(vars.$tab--text-color);
			white-space: nowrap;

			&::before {
				position: absolute;
				inset-block-start: 50%;
				inset-inline: calc(
					-1 * props.get(vars.$tab--pad-i) + 0.5 * props.get(vars.$spacing)
				);
				z-index: -10;
				block-size: 1.5em;
				content: "";
				border-radius: props.get(vars.$rounding);
				transform: translateY(-50%);
			}

			&::after {
				position: absolute;
				inset-block-end: 0;
				inset-inline: calc(0.5 * props.get(vars.$spacing));
				z-index: 10;
				display: none;
				block-size: props.get(vars.$indicator--width);
				content: "";
				background-color: props.get(vars.$tab--selected--text-color);
			}

			&:link,
			&:visited {
				&:hover,
				&:active,
				&:focus-visible {
					color: props.get(vars.$tab--selected--text-color);
				}

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

			@include bem.next-twin-elem {
				margin-inline-start: calc(0.5 * props.get(vars.$spacing));
			}

			@include bem.is("selected") {
				color: props.get(vars.$tab--selected--text-color);

				&::after {
					display: block;
				}
			}
		}

		@include bem.modifier("accent") {
			@include bem.elem("tab") {
				&::after {
					background-color: props.get(vars.$tab--accent--text-color);
				}

				@include bem.is("selected") {
					color: props.get(vars.$tab--accent--text-color);
				}
			}
		}
	}
}