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

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

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

	@include bem.object("table") {
		border-spacing: 0;
		border-collapse: separate;

		@include bem.modifier("fixed") {
			table-layout: fixed;
		}

		@include bem.elem("head-cell") {
			padding-block: props.get(vars.$pad-b);
			padding-inline: props.get(vars.$pad-i);
			font-family: props.get(vars.$heading--font-family);
			font-size: props.get(vars.$heading--font-size);
			font-weight: props.get(vars.$heading--font-weight);
			color: props.get(vars.$heading-color);
			text-align: start;
			text-transform: props.get(vars.$heading--text-transform);
			letter-spacing: props.get(vars.$heading--letter-spacing);
		}

		@include bem.elem("cell") {
			padding-block: props.get(vars.$pad-b);
			padding-inline: props.get(vars.$pad-i);
			border-color: props.get(vars.$border-color);
			border-style: solid;
			border-width: 0;
			border-block-start-width: props.get(vars.$border-width);

			@include bem.modifier("divider") {
				border-inline-end-width: props.get(vars.$border-width);
			}
		}

		@include bem.elem("row") {
			&:last-child {
				@include bem.elem("cell") {
					border-block-end-width: props.get(vars.$border-width);
				}
			}
		}

		@include bem.modifier("flush") {
			@include bem.elem("head-cell", "cell") {
				&:first-child {
					padding-inline-start: 0;
				}

				&:last-child {
					padding-inline-end: 0;
				}
			}
		}

		@include bem.modifier("box") {
			@include bem.elem("cell") {
				background-color: props.get(vars.$box--bg-color);

				&:first-child {
					border-inline-start-width: props.get(vars.$border-width);
				}

				&:last-child {
					border-inline-end-width: props.get(vars.$border-width);
				}
			}

			@include bem.elem("row") {
				&:first-child {
					@include bem.elem("cell") {
						&:first-child {
							border-start-start-radius: props.get(vars.$rounding);
						}

						&:last-child {
							border-start-end-radius: props.get(vars.$rounding);
						}
					}
				}

				&:last-child {
					@include bem.elem("cell") {
						&:first-child {
							border-end-start-radius: props.get(vars.$rounding);
						}

						&:last-child {
							border-end-end-radius: props.get(vars.$rounding);
						}
					}
				}
			}
		}

		@include bem.modifier("interactive") {
			@include bem.elem("row") {
				@include bem.elem("cell") {
					cursor: pointer;
				}

				&:hover {
					@include bem.elem("cell") {
						background-color: props.get(vars.$hover--bg-color);
					}
				}

				&:active {
					@include bem.elem("cell") {
						background-color: props.get(vars.$active--bg-color);
					}
				}
			}

			@include bem.modifier("box") {
				@include bem.elem("row") {
					&:hover {
						@include bem.elem("cell") {
							background-color: props.get(vars.$box--hover--bg-color);
						}
					}

					&:active {
						@include bem.elem("cell") {
							background-color: props.get(vars.$box--active--bg-color);
						}
					}
				}
			}
		}

		@include bem.modifier("sm") {
			@include bem.elem("head-cell", "cell") {
				padding-block: props.get(vars.$pad-b--sm);
			}
		}
	}
}