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

@forward "split-view.vars";
@use "split-view.vars" as vars;

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

	@include bem.layout("split-view") {
		display: flex;
		gap: props.get(vars.$col-gap);
		align-items: start;

		@include bem.elem("panel") {
			flex: 1 1 auto;
			inline-size: 100%;
			min-inline-size: 0;

			&::before {
				display: block;
				margin-block: -100em 100em;
				content: "";
			}

			@include bem.modifier("side-25") {
				flex: 0 0 auto;
				inline-size: 25%;
			}

			@include bem.modifier("min-50") {
				min-inline-size: props.get(vars.$panel--min-50);
			}

			@include bem.modifier("min-100") {
				min-inline-size: props.get(vars.$panel--min-100);
			}

			@include bem.modifier("min-200") {
				min-inline-size: props.get(vars.$panel--min-200);
			}

			@include bem.modifier("sticky") {
				position: sticky;
				inset-block-start: props.get(vars.$panel--sticky-offset);
			}
		}

		@include bem.modifier("gapless") {
			gap: props.get(vars.$gapless);

			@include bem.elem("panel") {
				@include bem.modifier("min-50") {
					min-inline-size: calc(
						props.get(vars.$panel--min-50) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}

				@include bem.modifier("min-100") {
					min-inline-size: calc(
						props.get(vars.$panel--min-100) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}

				@include bem.modifier("min-200") {
					min-inline-size: calc(
						props.get(vars.$panel--min-200) +
							props.get(vars.$col-gap) - props.get(vars.$gapless)
					);
				}
			}
		}

		@include bem.elem("content") {
			inline-size: 100%;
		}

		@include media.media("<=md") {
			flex-direction: column;
			gap: props.get(vars.$row-gap);
			align-items: stretch;

			@include bem.modifier("gapless") {
				gap: props.get(vars.$gapless);
			}

			@include bem.modifier("wrap-reverse") {
				flex-direction: column-reverse;
			}

			@include bem.elem("panel") {
				inline-size: auto;

				@include bem.modifier("side-25") {
					inline-size: auto;
				}

				@include bem.modifier("min-50", "min-100", "min-200") {
					min-inline-size: 0;
				}

				@include bem.modifier("sticky") {
					position: static;
				}
			}
		}
	}
}