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

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

@mixin status($indicator-size) {
	@include bem.elem("status") {
		inline-size: props.get($indicator-size);
		block-size: props.get($indicator-size);

		@include bem.sibling-elem("content") {
			mask-image: radial-gradient(
				circle calc(0.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing))
					at calc(100% - 0.5 * props.get($indicator-size))
					calc(100% - 0.5 * props.get($indicator-size)),
				transparent 95%,
				#fff
			);
		}
	}
}

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

	@include bem.object("avatar") {
		position: relative;
		display: inline-block;
		font-style: normal;
		vertical-align: 0.05em;
		border-radius: props.get(vars.$rounding);

		&::after {
			position: absolute;
			inset: calc(-1 * props.get(vars.$key-focus--border-offset));
			z-index: 1;
			display: none;
			pointer-events: none;
			outline: props.get(vars.$key-focus--border-color) solid
				props.get(vars.$key-focus--border-width);
			content: "";
			border: props.get(vars.$key-focus--border-offset) solid transparent;
			border-radius: props.get(vars.$rounding);
			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.elem("status") {
			position: absolute;
			inset-block-end: 0;
			inset-inline-end: 0;
		}

		@include bem.elem("icon") {
			position: absolute;
			inset-block-end: 0;
			inset-inline-end: 0;
			display: flex;
			align-items: flex-end;
			justify-content: flex-end;
			inline-size: props.get(vars.$icon-size);
			block-size: props.get(vars.$icon-size);

			@include bem.sibling-elem("content") {
				clip-path: props.get(vars.$icon-mask);
			}
		}

		@include bem.elem("content") {
			display: block;
			inline-size: props.get(vars.$size);
			block-size: props.get(vars.$size);
			font-size: props.get(vars.$font-size);
			line-height: props.get(vars.$size);
			text-align: center;
			object-fit: cover;
			object-position: center center;
			border-radius: props.get(vars.$rounding);
		}

		@include bem.modifier("circle") {
			border-radius: 100%;

			&::after {
				border-radius: 100%;
			}

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

		@include bem.modifier("placeholder") {
			@include bem.elem("content") {
				background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
			}
		}

		@include bem.modifier("colored") {
			@include bem.elem("content") {
				color: #fff;
				background-color: hsl(
					props.get(vars.$bg-color--h),
					props.get(vars.$bg-color--s),
					props.get(vars.$bg-color--l)
				);
			}
		}

		@include bem.modifier("colored-gradient") {
			@include bem.elem("content") {
				color: #fff;
				background: linear-gradient(
					props.get(vars.$bg-angle),
					hsl(
						props.get(vars.$bg-color--h),
						props.get(vars.$bg-color--s),
						props.get(vars.$bg-color--l)
					),
					hsl(
						props.get(vars.$bg-color-2--h),
						props.get(vars.$bg-color-2--s),
						props.get(vars.$bg-color-2--l)
					)
				);
			}
		}

		@include status(vars.$indicator-size);

		@each $mod, $size, $font-size, $indicator-size, $icon-size, $icon-mask in vars.$sizes {
			@include bem.modifier($mod) {
				@include status($indicator-size);

				@include bem.elem("icon") {
					inline-size: props.get($icon-size);
					block-size: props.get($icon-size);

					@include bem.sibling-elem("content") {
						clip-path: props.get($icon-mask);
					}
				}

				@include bem.elem("content") {
					inline-size: props.get($size);
					block-size: props.get($size);
					font-size: props.get($font-size);
					line-height: props.get($size);
				}
			}
		}

		&:focus-visible {
			&::after {
				display: block;
			}
		}
	}
}