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

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

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

	@include bem.scope("links") {
		:link,
		:visited {
			color: currentColor;
			text-decoration: underline;
			text-decoration-thickness: props.get(vars.$underline-width);
			text-decoration-color: props.get(vars.$underline-color);
			border-radius: props.get(vars.$rounding-sm);
			box-decoration-break: clone;

			&:hover {
				text-decoration: underline;
				text-decoration-thickness: props.get(vars.$hover--underline-width);
				text-decoration-skip-ink: none;
			}

			&:focus-visible {
				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.modifier("invisible") {
			:link,
			:visited {
				text-decoration: none;
			}
		}

		@include bem.modifier("colored") {
			:link {
				color: props.get(vars.$colored--text-color);
				text-decoration-color: props.get(vars.$colored--underline-color);

				&:hover {
					color: props.get(vars.$colored--hover--text-color);
				}
			}

			:visited {
				color: props.get(vars.$colored--visited--text-color);
				text-decoration-color: props.get(vars.$colored--visited--underline-color);

				&:hover {
					color: props.get(vars.$colored--visited--hover--text-color);
				}
			}
		}

		@include bem.modifier("mark-external") {
			:link,
			:visited {
				&[href^="http"] {
					&::after {
						content: " ↗";
					}
				}
			}
		}

		@each $theme in map.keys(props.get(vars.$static-themes)) {
			@include bem.modifier(string.slice($theme, 3)) {
				:link,
				:visited {
					color: props.get(vars.$static-themes, $theme, --text-color);
					text-decoration-color: props.get(
						vars.$static-themes,
						$theme,
						--underline-color
					);

					&:hover {
						color: props.get(vars.$static-themes, $theme, --hover, --text-color);
					}

					&:focus-visible {
						color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
						outline-color: props.get(
							vars.$static-themes,
							$theme,
							--key-focus,
							--border-color
						);
						box-shadow: 0 0 0
							calc(
								props.get(vars.$key-focus--border-width) +
									props.get(vars.$key-focus--outline-width)
							)
							props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
					}
				}
			}
		}

		:has(img) {
			img {
				margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
				border: props.get(vars.$key-focus--border-offset) solid transparent;
				border-radius: calc(
					props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
				);
			}

			&:link,
			&:visited {
				&:focus-visible {
					outline: none;
					box-shadow: none;

					img {
						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);
					}
				}
			}
		}
	}
}