@use 'sass:map';
@use 'sass:string';
@use '../base/maps/tokens' as *;
@use '../base/layout' as *;
@use '../base/mixins/breakpoints' as break;
@use '../base/functions' as *;

@each $device-key, $device-map in $brandui-device-breakpoints-new {
	$device-value: map.get($device-map, 'value');
	$device-prefix: map.get($device-map, 'prefix');

	@media (max-width: string.unquote('#{$device-value}px')) {
		// Device Breakpoints Start
		@for $i from 1 through 13 {
			.#{$device-prefix}grid-rows-#{$i} {
				grid-template-rows: repeat($i, minmax(0, 1fr));
			}
			.#{$device-prefix}grid-rows-#{$i}-auto {
				grid-template-rows: repeat($i, auto);
			}

			.#{$device-prefix}grid-rows-span-#{$i} {
				grid-row: span $i / span $i;
			}

			.#{$device-prefix}grid-rows-span-start-#{$i} {
				grid-row-start: span $i;
			}

			.#{$device-prefix}grid-rows-span-end-#{$i} {
				grid-row-end: span $i;
			}

			.#{$device-prefix}grid-rows-start-#{$i} {
				grid-row-start: $i;
			}

			.#{$device-prefix}grid-rows-end-#{$i} {
				grid-row-end: $i;
			}

			.#{$device-prefix}grid-cols-#{$i} {
				grid-template-columns: repeat($i, minmax(0, 1fr));
			}

			.#{$device-prefix}grid-cols-#{$i}-auto {
				grid-template-columns: repeat($i, auto);
			}

			.#{$device-prefix}grid-col-span-#{$i} {
				grid-column: span $i / span $i;
			}

			.#{$device-prefix}grid-col-span-start-#{$i} {
				grid-column-start: span $i;
			}

			.#{$device-prefix}grid-col-span-end-#{$i} {
				grid-column-end: span $i;
			}

			.#{$device-prefix}grid-col-start-#{$i} {
				grid-column-start: $i;
			}

			.#{$device-prefix}grid-col-end-#{$i} {
				grid-column-end: $i;
			}
		}

		.#{$device-prefix}grid-rows-none {
			grid-template-rows: none;
		}

		.#{$device-prefix}grid-rows-auto {
			grid-row: auto;
		}

		.#{$device-prefix}grid-rows-span-full {
			grid-row: 1 / -1;
		}

		.#{$device-prefix}grid-rows-start-auto {
			grid-row-start: auto;
		}

		.#{$device-prefix}grid-rows-end-auto {
			grid-row-end: auto;
		}

		.#{$device-prefix}grid-auto-rows {
			grid-auto-rows: auto;
		}

		.#{$device-prefix}grid-auto-rows-min {
			grid-auto-rows: min-content;
		}

		.#{$device-prefix}grid-auto-rows-max {
			grid-auto-rows: max-content;
		}

		.#{$device-prefix}grid-auto-rows-fr {
			grid-auto-rows: minmax(0, 1fr);
		}

		.#{$device-prefix}grid-flow-row {
			grid-auto-flow: row;
		}

		.#{$device-prefix}grid-flow-rows-dense {
			grid-auto-flow: row dense;
		}

		.#{$device-prefix}grid-cols-none {
			grid-template-columns: none;
		}

		.#{$device-prefix}grid-col-auto {
			grid-column: auto;
		}

		.#{$device-prefix}grid-col-span-full {
			grid-column: 1 / -1;
		}

		.#{$device-prefix}grid-col-start-auto {
			grid-column-start: auto;
		}

		.#{$device-prefix}grid-col-end-auto {
			grid-column-end: auto;
		}

		.#{$device-prefix}grid-auto-cols {
			grid-auto-columns: auto;
		}

		.#{$device-prefix}grid-auto-cols-min {
			grid-auto-columns: min-content;
		}

		.#{$device-prefix}grid-auto-cols-max {
			grid-auto-columns: max-content;
		}

		.#{$device-prefix}grid-auto-cols-fr {
			grid-auto-columns: minmax(0, 1fr);
		}

		.#{$device-prefix}grid-flow-col {
			grid-auto-flow: column;
		}

		.#{$device-prefix}grid-flow-col-dense {
			grid-auto-flow: column dense;
		}

		.#{$device-prefix}grid-flow-dense {
			grid-auto-flow: dense;
		}

		@each $space in $position-spaces {
			.#{$device-prefix}grid-auto-rows-#{$space} {
				grid-auto-rows: minmax(0, var(--padding-#{$space}));
			}

			.#{$device-prefix}grid-rows-auto-#{$space} {
				grid-template-rows: repeat(
					auto-fill,
					minmax(var(--padding-#{$space}), 1fr)
				);
			}

			.#{$device-prefix}grid-auto-cols-#{$space} {
				grid-auto-columns: minmax(0, var(--padding-#{$space}));
			}

			.#{$device-prefix}grid-cols-auto-#{$space} {
				grid-template-columns: repeat(
					auto-fill,
					minmax(var(--padding-#{$space}), 1fr)
				);
			}
		}

		@for $i from 1 through 12 {
			.#{$device-prefix}grid-auto-rows-#{$i} {
				grid-auto-rows: minmax(0, calc((#{$brandui-content-max} / 12) * #{$i}));
			}

			.#{$device-prefix}grid-rows-auto-#{$i} {
				grid-template-rows: repeat(
					auto-fill,
					minmax(calc((#{$brandui-content-max} / 12) * #{$i}), 1fr)
				);
			}

			.#{$device-prefix}grid-auto-cols-#{$i} {
				grid-auto-columns: minmax(
					0,
					calc((#{$brandui-content-max} / 12) * #{$i})
				);
			}

			.#{$device-prefix}grid-cols-auto-#{$i} {
				grid-template-columns: repeat(
					auto-fill,
					minmax(calc((#{$brandui-content-max} / 12) * #{$i}), 1fr)
				);
			}
		}

		// Device Breakpoints End
	}
}

.grid-editorial {
	display: grid;

	@include break.min-tablet {
		&.grid-items {
			/* Styles for 2 cards */

			&-2 {
				@include break.min-tablet {
					grid-template-columns: repeat(2, minmax(0, 1fr));
				}
			}

			/* Styles for 3 cards */
			&-3 {
				@include break.min-tablet {
					& > :nth-child(1),
					& > :nth-child(3) {
						grid-column: span 6;
					}

					& > :nth-child(2) {
						grid-column: 7 / span 6;
						grid-row: span 2;
					}
				}
			}

			/* Styles for 4 cards */
			&-4 {
				@include break.min-tablet {
					grid-template-columns: repeat(3, minmax(0, 1fr));

					& > :first-child {
						min-height: brandui-col-spacing(3);
						grid-column: 1 / -1;
					}
				}
			}

			&-5 {
				@include break.min-tablet {
					grid-template-columns: repeat(3, minmax(0, 1fr));

					& > :first-child {
						min-height: brandui-col-spacing(3);
						grid-column: span 2 / span 2;
					}
				}
			}
		}
	}
}

/* Temporary styles until real content is present
   TODO: may need to split this into a 2 column grid,
   with a nested grid within the right column.
*/
.grid-masonry {
	display: grid;
	gap: var(--padding-large);

	&.grid-items-9 {
		@include break.min-mobile {
			grid-template-columns: repeat(2, minmax(0, 1fr));
			grid-auto-rows: unset;

			& > * {
				grid-column: span 1;
				grid-row: span 4;
			}

			& > :nth-child(7) {
				grid-column: span 2;
				grid-row: span 3;
			}
		}

		@include break.min-tablet {
			display: grid;
			grid-template-columns: repeat(10, 1fr);

			// grid-auto-rows: map.get($brandui-spacing, small);

			& > * {
				grid-column: span 3;
				grid-row: span 7;
			}

			& > :nth-child(1),
			& > :nth-child(6) {
				grid-column: span 4;
				grid-row: span 10;
			}

			// Form item
			& > :nth-child(7) {
				grid-column: span 6;
				grid-row: span 4;
			}
		}
	}
}

.grid-collapsible {
	display: grid;
	grid-template-columns: repeat(
		auto-fill,
		minmax(brandui-col-spacing(2.5), 1fr)
	);
}