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

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

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

	@include bem.object("divider") {
		display: flex;
		flex: 0 0 auto;
		flex-direction: row;
		align-items: center;
		block-size: 1em;
		margin-block: props.get(vars.$margin-b);
		font-size: props.get(vars.$strong--label-font-size);
		font-weight: 700;
		line-height: 1;
		color: props.get(vars.$strong--label-color);
		text-transform: uppercase;
		letter-spacing: props.get(vars.$letter-spacing);
		background-color: transparent;

		&::before,
		&::after {
			flex: 1 1 auto;
			inline-size: 100%;
			block-size: props.get(vars.$strong--border-width);
			content: "";
			background-color: props.get(vars.$strong--bg-color);
		}

		&::before {
			display: block;
		}

		@include bem.elem("label") {
			flex: 0 0 auto;
		}

		@include bem.modifier("vertical") {
			align-self: stretch;
			inline-size: props.get(vars.$vertical--border-width);
			block-size: auto;
			margin-block: 0;
			background-color: props.get(vars.$strong--bg-color);

			&::before,
			&::after {
				display: none;
			}
		}

		@include bem.modifier("dot") {
			align-self: center;
			inline-size: props.get(vars.$dot--size);
			block-size: props.get(vars.$dot--size);
			margin-block: 0;
			background-color: props.get(vars.$strong--bg-color);
			border-radius: props.get(vars.$dot--size);

			&::before,
			&::after {
				display: none;
			}
		}

		@include bem.modifier("medium") {
			font-size: props.get(vars.$medium--label-font-size);
			font-weight: 500;
			color: props.get(vars.$medium--label-color);

			&::before,
			&::after {
				block-size: props.get(vars.$medium--border-width);
				background-color: props.get(vars.$medium--bg-color);
			}

			@include bem.modifier("vertical") {
				background-color: props.get(vars.$medium--bg-color);
			}

			@include bem.modifier("dot") {
				background-color: props.get(vars.$medium--bg-color);
			}
		}

		@include bem.modifier("quiet") {
			font-size: props.get(vars.$quiet--label-font-size);
			font-weight: 500;
			color: props.get(vars.$quiet--label-color);

			&::before,
			&::after {
				block-size: props.get(vars.$quiet--border-width);
				background-color: props.get(vars.$quiet--bg-color);
			}

			@include bem.modifier("vertical") {
				background-color: props.get(vars.$vertical--quiet--bg-color);
			}

			@include bem.modifier("dot") {
				background-color: props.get(vars.$dot--quiet--bg-color);
			}
		}

		@include bem.modifier("faint") {
			font-size: props.get(vars.$faint--label-font-size);
			font-weight: 500;
			color: props.get(vars.$faint--label-color);

			&::before,
			&::after {
				block-size: props.get(vars.$faint--border-width);
				background-color: props.get(vars.$faint--bg-color);
			}

			@include bem.modifier("vertical") {
				background-color: props.get(vars.$vertical--quiet--bg-color);
			}

			@include bem.modifier("dot") {
				background-color: props.get(vars.$dot--quiet--bg-color);
			}
		}

		@include bem.modifier("labelled") {
			&::before {
				margin-inline-end: 1em;
			}

			&::after {
				display: block;
				margin-inline-start: 1em;
			}
		}

		@each $theme in map.keys(props.get(vars.$themes)) {
			@include bem.modifier(string.slice($theme, 3)) {
				&::before,
				&::after {
					background-color: props.get(vars.$themes, $theme, --bg);
				}

				@include bem.elem("label") {
					color: props.get(vars.$themes, $theme, --label);
				}
			}
		}

		@each $theme in map.keys(props.get(vars.$static-themes)) {
			@include bem.modifier(string.slice($theme, 3)) {
				&::before,
				&::after {
					background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
				}

				@include bem.elem("label") {
					color: props.get(vars.$static-themes, $theme, --strong, --label);
				}

				@include bem.modifier("medium") {
					&::before,
					&::after {
						background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
					}

					@include bem.elem("label") {
						color: props.get(vars.$static-themes, $theme, --medium, --label);
					}
				}

				@include bem.modifier("quiet") {
					&::before,
					&::after {
						background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
					}

					@include bem.elem("label") {
						color: props.get(vars.$static-themes, $theme, --quiet, --label);
					}
				}

				@include bem.modifier("faint") {
					&::before,
					&::after {
						background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
					}

					@include bem.elem("label") {
						color: props.get(vars.$static-themes, $theme, --faint, --label);
					}
				}
			}
		}
	}
}