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

@use "../objects/card.vars" as card;

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

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

	@include bem.layout("card-list") {
		display: flex;
		flex-direction: column;
		gap: props.get(vars.$row-gap);

		@include bem.modifier("merge") {
			position: relative;
			gap: 0;
			border-radius: props.get(card.$rounding);

			@include bem.elem("card") {
				border-color: props.get(card.$border-color) props.get(card.$border-color)
					props.get(vars.$border-color);
				background-clip: content-box;
				box-shadow: none;

				&:not(:last-child) {
					position: relative;
					border-end-start-radius: 0;
					border-end-end-radius: 0;
				}

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

					&:focus-visible {
						z-index: 10;
					}
				}

				@include bem.next-twin-elem {
					margin-block-start: calc(-1 * props.get(card.$border-width));
					border-block-start-color: transparent;
					border-start-start-radius: 0;
					border-start-end-radius: 0;

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

						&:focus-visible {
							margin-block-start: calc(
								-1 *
									props.get(card.$border-width) - props.get(
										card.$key-focus--border-width
									)
							);
						}
					}
				}

				&:last-child {
					border-block-end-color: props.get(card.$border-color);
				}

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

					&:focus-visible {
						border-color: props.get(card.$hover--bg-color);
						box-shadow: 0 0 0
							calc(
								props.get(card.$key-focus--border-width) +
									props.get(card.$key-focus--outline-width)
							)
							props.get(card.$key-focus--outline-color);
					}
				}
			}

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

					@include bem.next-twin-elem {
						border-block-start-color: transparent;
					}

					&:last-child {
						border-block-end-color: props.get(card.$bg-color);
					}

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

						&:focus-visible {
							border-color: props.get(card.$hover--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(card.$shadow-color);
			}

			@include bem.modifier("interactive") {
				transition:
					transform 0.2s,
					box-shadow 0.2s;

				&:hover,
				&:active,
				&:focus-within {
					box-shadow: none;
					transform: translateY(props.get(card.$hover--offset-b));
				}
			}
		}

		@include bem.modifier("quiet") {
			row-gap: props.get(vars.$quiet--row-gap);
		}

		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
			$breakpoint in vars.$grid-layouts
		{
			@include bem.modifier($mod) {
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(props.get($col-width), 1fr));
				gap: props.get($row-gap) props.get($col-gap);

				@include bem.modifier("quiet") {
					row-gap: props.get($quiet--row-gap);
				}

				@include media.media("<=#{$breakpoint}") {
					display: flex;
				}
			}
		}

		@each $mod, $row-gap, $col-gap, $col-width, $quiet--row-gap,
			$breakpoint in vars.$flex-layouts
		{
			@include bem.modifier($mod) {
				display: flex;
				flex-flow: row wrap;
				gap: props.get($row-gap) props.get($col-gap);

				@include bem.modifier("quiet") {
					row-gap: props.get($quiet--row-gap);
				}

				@include bem.elem("card") {
					flex: 0.1 0 auto;
					inline-size: props.get($col-width);
				}

				@include media.media("<=#{$breakpoint}") {
					flex-flow: column nowrap;

					@include bem.elem("card") {
						inline-size: auto;
					}
				}
			}
		}

		@include bem.modifier("masonry") {
			display: block;
			columns: auto props.get(vars.$masonry--col-width);
			column-gap: props.get(vars.$masonry--col-gap);

			@include bem.elem("card") {
				margin-block-end: props.get(vars.$masonry--row-gap);
				break-inside: avoid;
			}

			@include bem.modifier("quiet") {
				@include bem.elem("card") {
					margin-block-end: props.get(vars.$masonry--quiet--row-gap);
				}
			}
		}

		@each $mod, $row-gap, $col-gap, $row-height, $quiet--row-gap in vars.$masonry-h-layouts {
			@include bem.modifier($mod) {
				flex-flow: row wrap;
				gap: props.get($row-gap) props.get($col-gap);

				@include bem.modifier("no-flush") {
					&::after {
						display: block;
						flex: 1 0 auto;
						inline-size: props.get($row-height);
						content: "";
					}
				}

				@include bem.elem("card") {
					flex: 1 0 auto;
					max-inline-size: 100%;
				}

				@include bem.elem("card-image") {
					block-size: props.get($row-height);
				}

				@include bem.modifier("quiet") {
					row-gap: props.get($quiet--row-gap);
				}
			}
		}

		@include bem.modifier("aspect-5\\/4") {
			@include bem.elem("card-image") {
				aspect-ratio: 5 / 4;
			}
		}
	}
}