@use "sass:map";
@use "sass:string";
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";
@use "pkg:include-media/dist/include-media" as media;

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

/* stylelint-disable-next-line scss/dollar-variable-pattern */
$-dirs: (
	"": "",
	"b": "-block",
	"bs": "-block-start",
	"be": "-block-end",
	"i": "-inline",
	"is": "-inline-start",
	"ie": "-inline-end",
) !default;

$-axes: (
	"": "",
	"r": "row-",
	"c": "column-",
) !default;

/* stylelint-disable-next-line scss/dollar-variable-pattern */
$-sizes: (
	0: vars.$size--0,
	10: vars.$size--10,
	50: vars.$size--50,
	75: vars.$size--75,
	100: vars.$size--100,
	125: vars.$size--125,
	200: vars.$size--200,
	400: vars.$size--400,
	700: vars.$size--700,
	800: vars.$size--800,
) !default;

$-font-sizes: (
	50: vars.$font-size--50,
	75: vars.$font-size--75,
	100: vars.$font-size--100,
	150: vars.$font-size--150,
	200: vars.$font-size--200,
	300: vars.$font-size--300,
) !default;

$-aspect-ratios: (
	"1\\/1": "1 / 1",
	"4\\/3": "4 / 3",
	"5\\/4": "5 / 4",
) !default;

@mixin styles {
	@include bem.utility("d-block") {
		display: block;
	}

	@include bem.utility("d-inline-block") {
		display: inline-block;
	}

	@include bem.utility("d-inline") {
		display: inline;
	}

	@include bem.utility("d-contents") {
		display: contents;
	}

	@include bem.utility("d-flex") {
		display: flex;
	}

	@include bem.utility("td-none") {
		text-decoration: none;
	}

	@include bem.utility("d-none") {
		display: none;

		@each $breakpoint in map.keys(media.$breakpoints) {
			@include media.media("<=#{$breakpoint}") {
				@include bem.suffix("#{$breakpoint}-lo") {
					display: none;
				}
			}

			@include media.media(">#{$breakpoint}") {
				@include bem.suffix("#{$breakpoint}-hi") {
					display: none;
				}
			}
		}

		@include bem.at-theme("js") {
			@include bem.suffix("js") {
				display: none;
			}
		}

		@include bem.at-theme("no-js") {
			@include bem.suffix("no-js") {
				display: none;
			}
		}

		@include bem.suffix("empty") {
			&:empty {
				display: none;
			}
		}
	}

	@include bem.utility("va-top") {
		vertical-align: top;
	}

	@include bem.utility("va-baseline") {
		vertical-align: baseline;
	}

	@include bem.utility("va-middle") {
		vertical-align: middle;
	}

	@include bem.utility("va-bottom") {
		vertical-align: bottom;
	}

	@include bem.utility("ta-start") {
		text-align: start;
	}

	@include bem.utility("ta-end") {
		text-align: end;
	}

	@include bem.utility("ta-center") {
		text-align: center;
	}

	@include bem.utility("fw-normal") {
		font-weight: normal;
	}

	@include bem.utility("ai-center") {
		align-items: center;
	}

	@include bem.utility("ai-start") {
		align-items: flex-start;
	}

	@include bem.utility("ai-end") {
		align-items: flex-end;
	}

	@include bem.utility("ai-stretch") {
		align-items: stretch;
	}

	@include bem.utility("ac-center") {
		align-content: center;
	}

	@include bem.utility("jc-center") {
		justify-content: center;
	}

	@include bem.utility("jc-start") {
		justify-content: flex-start;
	}

	@include bem.utility("jc-end") {
		justify-content: flex-end;
	}

	@include bem.utility("tt-upper") {
		text-transform: uppercase;
	}

	@include bem.utility("tt-lower") {
		text-transform: lowercase;
	}

	@include bem.utility("c-heading") {
		color: props.get(vars.$theme, --heading);

		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
			$theme-name: static-#{string.slice($theme, 3)};

			@include bem.at-theme($theme-name) {
				color: props.get(vars.$transparent-colors, $theme, --900);
			}
		}
	}

	@include bem.utility("c-text") {
		color: props.get(vars.$theme, --text);

		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
			$theme-name: static-#{string.slice($theme, 3)};

			@include bem.at-theme($theme-name) {
				color: props.get(vars.$transparent-colors, $theme, --800);
			}
		}
	}

	@include bem.utility("c-mute") {
		color: props.get(vars.$theme, --text-mute);

		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
			$theme-name: static-#{string.slice($theme, 3)};

			@include bem.at-theme($theme-name) {
				color: props.get(vars.$transparent-colors, $theme, --700);
			}
		}
	}

	@include bem.utility("c-mute-more") {
		color: props.get(vars.$theme, --text-mute-more);

		@each $theme in map.keys(props.get(vars.$transparent-colors)) {
			$theme-name: static-#{string.slice($theme, 3)};

			@include bem.at-theme($theme-name) {
				color: props.get(vars.$transparent-colors, $theme, --600);
			}
		}
	}

	@each $mod, $size in $-font-sizes {
		@include bem.utility("fs-#{$mod}") {
			font-size: props.get($size);
		}
	}

	@each $dir, $prop in (is: inline-size, bs: block-size) {
		@include bem.utility("#{$dir}-100") {
			#{$prop}: 100%;
		}

		@include bem.utility("#{$dir}-75") {
			#{$prop}: 75%;
		}

		@include bem.utility("#{$dir}-50") {
			#{$prop}: 50%;
		}

		@include bem.utility("#{$dir}-25") {
			#{$prop}: 25%;
		}

		@include bem.utility("#{$dir}-1px") {
			#{$prop}: 1px;
		}

		@include bem.utility("#{$dir}-0") {
			#{$prop}: 0;
		}
	}

	@include bem.utility("elp") {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	@include bem.utility("hyph") {
		hyphens: auto;
		hyphenate-limit-chars: auto;
	}

	@include bem.utility("tw-balance") {
		text-wrap-style: balance;
	}

	@include bem.utility("o-auto") {
		overflow: auto;
	}

	@include bem.utility("o-hidden") {
		overflow: hidden;
	}

	@include bem.utility("p-static") {
		position: static;
	}

	@include bem.utility("p-relative") {
		position: relative;
	}

	@include bem.utility("p-fixed") {
		position: fixed;
	}

	@include bem.utility("p-sticky-bs") {
		position: sticky;
		inset-block-start: props.get(vars.$sticky-top-offset);
	}

	@include bem.utility("p-sticky-be") {
		position: sticky;
		inset-block-end: 0;
	}

	@include bem.utility("br-round") {
		border-radius: props.get(vars.$rounding);
	}

	@include bem.utility("br-round-sm") {
		border-radius: props.get(vars.$rounding--sm);
	}

	@each $dir, $prefix in $-axes {
		@each $mod, $size in $-sizes {
			@include bem.utility("#{$dir}g-#{$mod}") {
				#{$prefix}gap: props.get($size);
			}
		}
	}

	@each $dir, $suffix in $-dirs {
		@include bem.utility("m#{$dir}-auto") {
			margin#{$suffix}: auto;
		}

		@include bem.utility("p#{$dir}-auto") {
			padding#{$suffix}: auto;
		}

		@each $mod, $size in $-sizes {
			@include bem.utility("m#{$dir}-#{$mod}") {
				margin#{$suffix}: props.get($size);
			}

			@include bem.utility("p#{$dir}-#{$mod}") {
				padding#{$suffix}: props.get($size);
			}
		}

		@include bem.utility("b#{$dir}-0") {
			border#{$suffix}: 0;

			@include bem.suffix("light") {
				@media (prefers-color-scheme: light) {
					border#{$suffix}: 0;
				}
			}

			@include bem.suffix("dark") {
				@media (prefers-color-scheme: dark) {
					border#{$suffix}: 0;
				}
			}
		}

		@include bem.utility("b#{$dir}-1") {
			border#{$suffix}: props.get(vars.$border-width--thin) solid
				props.get(vars.$theme, --border);

			@include bem.suffix("light") {
				@media (prefers-color-scheme: light) {
					border#{$suffix}: props.get(vars.$border-width--thin) solid
						props.get(vars.$theme, --border);
				}
			}

			@include bem.suffix("dark") {
				@media (prefers-color-scheme: dark) {
					border#{$suffix}: props.get(vars.$border-width--thin) solid
						props.get(vars.$theme, --border);
				}
			}
		}

		@include bem.utility("b#{$dir}-1-mute") {
			border#{$suffix}: props.get(vars.$border-width--thin) solid
				props.get(vars.$theme, --border-mute);

			@include bem.suffix("light") {
				@media (prefers-color-scheme: light) {
					border#{$suffix}: props.get(vars.$border-width--thin) solid
						props.get(vars.$theme, --border-mute);
				}
			}

			@include bem.suffix("dark") {
				@media (prefers-color-scheme: dark) {
					border#{$suffix}: props.get(vars.$border-width--thin) solid
						props.get(vars.$theme, --border-mute);
				}
			}
		}
	}

	@include bem.utility("mbs-neutralize") {
		&::before {
			display: block;
			margin-block: -100em 100em;
			content: "";
		}
	}

	@each $mod, $value in $-aspect-ratios {
		@include bem.utility("ar-#{$mod}") {
			aspect-ratio: string.unquote($value);
		}
	}

	@include bem.utility("sr-only") {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		white-space: nowrap;
		border: 0;
		clip-path: inset(50%);
	}
}