@use 'sass:meta';
@use 'include-media/dist/include-media' as media;
@use 'iro-sass/src/bem';
@use 'iro-sass/src/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(vars.$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;
				}

				&:hover,
				&:active,
				&:focus-visible {
					transform: none;
					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;

					&: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);
				}

				&: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);
					}

					&: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('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;
				}
			}
		}

		@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);
				}
			}
		}

		@include bem.modifier('masonry-h') {
			flex-flow: row wrap;
			gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);

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

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

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

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

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