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

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

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

	@include bem.object("emoji") {
		position: relative;
		display: inline-block;
		inline-size: calc(props.get(vars.$size));
		block-size: calc(props.get(vars.$size));
		padding: calc(props.get(vars.$pad));
		margin: calc(-1 * props.get(vars.$pad));
		vertical-align: props.get(vars.$valign);
		object-fit: contain;

		@include bem.modifier("icon") {
			margin: calc(
				-1 * props.get(vars.$pad) - 0.5 * (props.get(vars.$size) - props.get(icon.$size))
			);
			vertical-align: props.get(icon.$valign);
		}

		@each $mod, $size, $valign in vars.$sizes {
			@include bem.modifier($mod) {
				inline-size: props.get($size);
				block-size: props.get($size);
				vertical-align: props.get($valign);

				@include bem.modifier("icon") {
					margin: calc(
						-1 * props.get(vars.$pad) - 0.5 * (props.get($size) - props.get(icon.$size))
					);
				}
			}
		}

		@include bem.modifier("zoomable") {
			border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
			transition:
				transform 0.2s ease,
				background-color 0.2s ease;

			&:hover {
				background-color: props.get(vars.$bg-color);
				transform: scale(props.get(vars.$zoom));
			}
		}
	}
}