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

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

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

	@include bem.object("card") {
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: props.get(vars.$bg-color);
		border: props.get(vars.$border-width) solid transparent;
		border-color: props.get(vars.$border-color);
		border-radius: props.get(vars.$rounding);
		transition:
			transform 0.2s,
			background-color 0.2s,
			border-color 0.2s,
			box-shadow 0.2s;

		@include bem.multi(
			"&:link, &:visited, &:enabled",
			"modifier" "interactive",
			"modifier" "collapsible"
		) {
			&:hover,
			&:active,
			&:focus-visible {
				background-color: props.get(vars.$hover--bg-color);
				border-color: props.get(vars.$hover--border-color);
				box-shadow: none;
				transform: translateY(props.get(vars.$hover--offset-b));
			}

			&:focus-visible {
				margin: calc(-1 * props.get(vars.$key-focus--border-width));
				outline: props.get(vars.$key-focus--border-color) solid
					props.get(vars.$key-focus--border-width);
				border: calc(
						props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)
					)
					solid transparent;
				border-radius: calc(
					props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
				);
				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);
				transition: transform 0.2s;
			}
		}

		@include bem.modifier("borderless") {
			border-color: props.get(vars.$bg-color);
		}

		@include bem.modifier("shadow") {
			box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
				props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
				props.get(vars.$shadow-color);

			@include bem.modifier("quiet") {
				@include bem.elem("image") {
					box-shadow: props.get(vars.$shadow-x) props.get(vars.$shadow-y)
						props.get(vars.$shadow-blur) props.get(vars.$shadow-grow)
						props.get(vars.$shadow-color);
				}
			}
		}

		@include bem.modifier("highlight") {
			margin: calc(props.get(vars.$border-width) - props.get(vars.$highlight--border-width));
			border-color: props.get(vars.$highlight--border-color);
			border-width: props.get(vars.$highlight--border-width);
			box-shadow: props.get(vars.$highlight--shadow-x) props.get(vars.$highlight--shadow-y)
				props.get(vars.$highlight--shadow-blur) props.get(vars.$highlight--shadow-grow)
				props.get(vars.$highlight--shadow-color);

			@include bem.multi(
				"&:link, &:visited, &:enabled",
				"modifier" "interactive",
				"modifier" "collapsible"
			) {
				&:hover,
				&:active {
					border-color: props.get(vars.$highlight--border-color);
				}
			}
		}

		@include bem.elem("avatar") {
			margin-block-start: props.get(vars.$pad-b);
			margin-inline-start: props.get(vars.$pad-i);
		}

		@include bem.elem("image") {
			position: relative;
			display: block;
			flex: 0 0 auto;
			inline-size: calc(100% + 2 * props.get(vars.$border-width));
			margin: calc(-1 * props.get(vars.$border-width));
			overflow: hidden;
			object-fit: cover;
			transition:
				background-color 0.2s,
				transform 0.2s,
				opacity 0.2s;

			&:first-child {
				border-start-start-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
				border-start-end-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
			}

			&:last-child {
				border-end-start-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
				border-end-end-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
			}

			@include bem.next-elem("avatar") {
				margin-block-start: calc(-0.7 * props.get(avatar.$size--xl));
			}
		}

		@include bem.elem("image-img") {
			display: block;
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}

		@include bem.elem("image-overlay") {
			position: absolute;
			inset-block-end: 0;
			inset-inline: 0;
			z-index: 5;
			padding-block: props.get(vars.$image-overlay--pad-b);
			padding-inline: props.get(vars.$image-overlay--pad-i);
		}

		@include bem.elem("body") {
			flex: 0 0 auto;
			padding-block: props.get(vars.$pad-b);
			padding-inline: props.get(vars.$pad-i);

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

			@include bem.modifier("no-mbs-neutralize") {
				&::before {
					display: none;
				}
			}

			@include bem.modifier("main") {
				flex-shrink: 1;
				block-size: 100%;
				min-block-size: 0;
			}
		}

		@include bem.elem("content") {
			margin-block-start: props.get(vars.$spacing);
		}

		@include bem.elem("footer") {
			flex: 0 0 auto;
			padding-block: 0 props.get(vars.$pad-b);
			padding-inline: props.get(vars.$pad-i);
			margin-block-start: calc(-1 * props.get(vars.$pad-b));

			&::before {
				display: block;
				block-size: props.get(vars.$divider-width);
				margin-block: props.get(vars.$spacing);
				content: "";
				background-color: props.get(vars.$divider-width);
			}
		}

		@include bem.modifier("quiet") {
			margin-inline: 0;
			background-color: transparent;
			border: 0;
			box-shadow: none;

			@include bem.multi(
				"&:link, &:visited, &:enabled",
				"modifier" "interactive",
				"modifier" "collapsible"
			) {
				&:hover,
				&:active,
				&:focus-visible {
					background-color: transparent;
					transform: none;

					@include bem.elem("image") {
						background-color: props.get(vars.$quiet--hover--image-color);
						opacity: 0.75;
						transform: translateY(props.get(vars.$hover--offset-b));
					}
				}

				&:focus-visible {
					margin: 0;
					outline: none;
					border: 0;
					box-shadow: none;

					@include bem.elem("image") {
						margin: calc(
							-1 *
								props.get(vars.$key-focus--border-width) - props.get(
									vars.$border-width
								)
						);
						outline: props.get(vars.$key-focus--border-color) solid
							props.get(vars.$key-focus--border-width);
						background-color: props.get(vars.$quiet--hover--image-color);
						border: props.get(vars.$key-focus--border-offset) solid transparent;
						border-radius: calc(
							props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)
						);
						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);
						opacity: 1;
					}
				}
			}

			@include bem.elem("image") {
				position: relative;
				background-color: props.get(vars.$quiet--image-color);
				background-clip: padding-box;
				border-radius: props.get(vars.$rounding);
			}

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

			@include bem.elem("footer") {
				padding-inline: 0;
			}
		}

		@include bem.modifier("thumbnail") {
			@include bem.elem("image") {
				border-radius: props.get(vars.$rounding);
			}

			@include bem.elem("body") {
				position: absolute;
				inset-block-end: calc(-1 * props.get(vars.$border-width));
				inset-inline: calc(-1 * props.get(vars.$border-width));
				z-index: 10;
				visibility: hidden;
				background-color: props.get(vars.$hover--bg-color);
				border-color: transparent;
				border-style: solid;
				border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
				border-end-start-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
				border-end-end-radius: calc(
					props.get(vars.$rounding) - props.get(vars.$border-width)
				);
				opacity: 0;
				transition:
					border-color 0.2s ease,
					opacity 0.2s ease,
					visibility 0s 0.2s linear;
			}

			@include bem.multi(
				"&:link, &:visited, &:enabled",
				"modifier" "interactive",
				"modifier" "collapsible"
			) {
				&:hover,
				&:active,
				&:focus-visible {
					@include bem.elem("body") {
						visibility: visible;
						border-color: props.get(vars.$hover--border-color);
						opacity: 1;
						transition:
							border-color 0.2s ease,
							opacity 0.2s ease,
							visibility 0.2s linear;
					}
				}
			}
		}

		@include bem.modifier("horizontal") {
			flex-direction: row;
			align-items: center;

			@include bem.elem("image") {
				align-self: stretch;
				inline-size: auto;

				&:first-child {
					border-start-end-radius: 0;
					border-end-start-radius: props.get(vars.$rounding);
				}

				&:last-child {
					border-start-end-radius: props.get(vars.$rounding);
					border-end-start-radius: 0;
				}
			}

			@include bem.elem("body") {
				@include bem.modifier("main") {
					block-size: auto;
					min-block-size: none;
					inline-size: 100%;
					min-inline-size: 0;
				}
			}
		}

		@include bem.modifier("collapsible") {
			display: block;
			interpolate-size: allow-keywords;

			@include bem.elem("header") {
				display: flex;
				align-items: center;
				gap: 1em;
				cursor: pointer;

				&::before {
					margin: 0;
					inline-size: 1em;
					font-size: 0.8em;
					content: "▶";
				}

				&:focus-visible {
					outline: props.get(vars.$key-focus--border-color) solid
						props.get(vars.$key-focus--border-width);
					outline-offset: calc(-1 * props.get(vars.$key-focus--border-width));
					border-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
				}

				@include bem.next-elem("body") {
					padding-block-start: 0;
				}
			}

			&::details-content {
				opacity: 0;
				block-size: 0;
				overflow-y: clip;
				transition:
					content-visibility 0.2s allow-discrete,
					opacity 0.2s ease,
					block-size 0.2s ease;
			}

			&[open] {
				@include bem.elem("header") {
					&::before {
						content: "▼";
					}
				}

				&::details-content {
					opacity: 1;
					block-size: auto;
				}
			}

			@media (prefers-reduced-motion: reduce) {
				&::details-content {
					transition: none;
				}
			}
		}
	}
}