@use "sass:meta";

@use "pkg:iro-design" as iro;
@use "pkg:iro-sass/bem";
@use "pkg:iro-sass/props";

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

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

	@include bem.object("message") {
		display: grid;
		position: relative;
		grid-template-rows: auto 1fr auto;
		grid-template-columns:
			auto calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x))
			minmax(0, 1fr);
		grid-template-areas:
			"line-from avatar  main"
			"line-from line-to main"
			"line-from replies replies";

		& + & {
			padding-block-start: props.get(vars.$spacing-outer);
		}

		@include bem.elem("line-from") {
			grid-area: line-from;
			position: relative;
			inline-size: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x));

			&::before,
			&::after {
				content: "";
				display: block;
				position: absolute;
				inset-block-start: 0;
				inset-inline-start: props.get(vars.$line-offset);
			}

			&::before {
				inline-size: props.get(vars.$line-width);
				block-size: calc(100% + props.get(vars.$spacing-outer));
				background-color: props.get(vars.$colors, --line);
			}

			&::after {
				inline-size: calc(
					props.get(vars.$avatar-size) - props.get(vars.$line-offset) + props.get(vars.$spacing-x)
				);
				block-size: calc(0.5 * (props.get(vars.$avatar-size) - props.get(vars.$line-width)));
				border-block-end: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
				border-inline-start: props.get(vars.$line-width) solid props.get(vars.$colors, --line);
				border-radius: 0 0 0 props.get(vars.$line-curve);
			}

			@include bem.modifier("last") {
				&::before {
					block-size: 0;
				}
			}

			@include bem.sibling-elem("avatar") {
				&::before {
					inset-block-start: 50%;
					inset-block-end: auto;
					inset-inline-start: 0;
					inline-size: 50%;
					block-size: props.get(vars.$line-width);
					transform: translateY(-50%);
				}
			}
		}

		@include bem.elem("line-to") {
			grid-area: line-to;
			display: block;
			inline-size: props.get(vars.$line-width);
			margin-inline-start: props.get(vars.$line-offset);
			background-color: props.get(vars.$colors, --line);
		}

		@include bem.elem("avatar") {
			position: relative;
			grid-area: avatar;
			inline-size: props.get(vars.$avatar-size);
			block-size: props.get(vars.$avatar-size);
			margin-inline-end: props.get(vars.$spacing-x);

			&::before,
			&::after {
				content: "";
				display: block;
				position: absolute;
				z-index: -1;
				inset-inline-start: props.get(vars.$line-offset);
				inline-size: props.get(vars.$line-width);
				block-size: 50%;
				background-color: props.get(vars.$colors, --line);
			}

			&::before {
				inset-block-start: 0;
			}

			&::after {
				inset-block-end: 0;
			}

			@include bem.modifier("last") {
				&::after {
					display: none;
				}
			}
		}

		@include bem.elem("avatar-dot") {
			grid-area: avatar;
			position: absolute;
			inset-block-start: 50%;
			inset-inline-start: 50%;
			inline-size: props.get(vars.$dot-radius);
			block-size: props.get(vars.$dot-radius);
			transform: translate(-50%, -50%);
			border: props.get(vars.$dot-width) solid props.get(vars.$colors, --dot, --border);
			border-radius: 1em;
			background-color: props.get(vars.$colors, --dot, --bg);
		}

		@include bem.elem("meta") {
			white-space: nowrap;
			color: props.get(vars.$colors, --meta);
		}

		@include bem.elem("main") {
			position: relative;
			grid-area: main;
		}

		@include bem.elem("replies") {
			grid-area: replies;

			&::before {
				content: "";
				grid-area: line;
				display: block;
				inline-size: props.get(vars.$line-width);
				block-size: props.get(vars.$spacing-inner);
				margin-inline-start: props.get(vars.$line-offset);
				background-color: props.get(vars.$colors, --line);
			}
		}

		@include bem.elem("header") {
			line-height: 1.4;

			@include bem.next-elem("body") {
				padding-block-start: props.get(vars.$spacing-y);
			}
		}

		@include bem.elem("body") {
			word-wrap: break-word;

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

		@include bem.elem("attachments") {
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$attachment-width), 1fr));
			grid-auto-rows: auto;
			gap: props.get(vars.$spacing-x);
			margin-block-start: props.get(vars.$spacing-attachments);
		}

		@include bem.elem("attachment") {
			aspect-ratio: 3 / 2;
			background-color: props.get(vars.$colors, --attachment, --bg);
		}

		@include bem.modifier("expanded") {
			grid-template-rows: auto 1fr auto;
			grid-template-columns: calc(props.get(vars.$avatar-size) + props.get(vars.$spacing-x)) minmax(
					0,
					1fr
				);
			grid-template-areas:
				"avatar      header"
				"body        body"
				"attachments attachments";

			@include bem.elem("header") {
				grid-area: header;
				align-self: center;
			}

			@include bem.elem("main") {
				display: contents;
			}

			@include bem.elem("body") {
				grid-area: body;
			}

			@include bem.elem("attachments") {
				grid-area: attachments;
			}
		}
	}
}