Slab: Skyline Mask

@use "sass:math";

.slab {
	$wave-height: 3vw;
	$wave-y-padding: calc(math.div($wave-height, 1) + #{$spacing-xl});
	$slab-padding: $spacing-3xl;
	position: relative;
	--bg-top: white;
	--bg-bottom: white;
	margin-bottom: $wave-height;
	@include clearfix;

	&:where(.slab + .slab:not(:where(.slab--has-ripple-top, .slab--has-ripples, [class*='slab--bg-gradient']))) {
		margin-top: -$spacing-xl;
	}

	&:where(.slab + :where(.slab--has-ripple-top, .slab--has-ripples)) {
		margin-top: -#{math.div($wave-height, 2)};
	}

	&:where(.slab--has-ripple-bottom, .slab--has-ripples) + :where(.slab--has-rainbow-ripple) {
		margin-top: -$wave-height*1.75;
	}

	&:where([class*='slab--bg-img'] + :where([class*='slab--bg-img'])) {
		margin-top: -#{math.div($wave-height, 1)};
	}

	&:where(.slab--has-ripple-bottom, .slab--has-ripples) + :where(.slab--has-ripple-top, .slab--has-ripples) {
		margin-top: -$wave-height*2;
	}

	// Elements

	&__title {
		margin-top: 0;
		margin-bottom: $spacing-xl;
	}

	&__inner {
		position: relative;
		padding: $spacing-3xl 0 0;
		z-index: 1;

		&--padded {
			padding: calc($spacing-3xl + 3vmin) 0 3vmin;
		}
	}

	&__bg {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 0;
		background: rgba(mix($blue--bold, $navy--dark, 25%), 1);

		&--black {
			background: black;
		}
	}

	&__bgImg {
		width: 100%;
		height: 100%;
		object-fit: cover;

		&--tint {
			opacity: 0.15;
			mix-blend-mode: luminosity;
		}
	}

	// Layouts
	@at-root {
		[class*='slab--has-overlay'] {
			.slab__inner {
				display: flex;
				align-items: center;
				width: 100%;
			}

			.slab__overlay {
				width: 100%;
				--text-color: white;
				--link-hover-color: white;
			}

			[class*='slab__bg--has-overlay'] {
				&::before {
					content: '';
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					background: linear-gradient(100deg,
						rgba(black, 0.65) 20%,
						rgba(black, 0.5) math.div($wrap-width, 2),
						rgba(black, 0)
					);

					@media (min-width: math.div($wrap-width, 1.5)) {
						background: linear-gradient(100deg,
							rgba(black, 0.65) 20%,
							rgba(black, 0.5) 60%,
							rgba(black, 0)
						)
					}
				}
			}
		}
	}

	&--has-overlay-left {
		// add this to the root to align the content (inner)
		.slab__overlay {
			max-width: math.div($wrap-width, 2);
			margin-right: 10%;
			justify-self: flex-start;
		}
	}

	&__bg--has-overlay-left {
		// also add this for an image overlay (if not using a tint)
	}

	&--has-overlay-right {
		// add this to the root to align the content (inner)

		.slab__inner {
			justify-content: flex-end;
		}

		.slab__overlay {
			max-width: math.div($wrap-width, 2);
			justify-self: flex-end;

			@media (min-width: 30rem) {
				margin-left: 20%;
			}
		}

		[class*='slab__bg--has-overlay'] {
			&::before {
				background: linear-gradient(-100deg,
					rgba(black, 0.65) 20%,
					rgba(black, 0.5) math.div($wrap-width, 2),
					rgba(black, 0)
				);

				@media (min-width: math.div($wrap-width, 1.5)) {
					background: linear-gradient(-100deg,
						rgba(black, 0.65) 20%,
						rgba(black, 0.5) 60%,
						rgba(black, 0)
					)
				}
			}
		}
	}

	&__bg--has-overlay-right {
		// also add this for an image overlay (if not using a tint)
	}

	// Backgrounds

	@at-root {
		[class*='slab--bg-gradient'],
		&--has-skyline-mask {
			background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom, var(--bg-top)) min(15rem, 100%));
			color: var(--color);
		}
	}

	&--bg-gradient-grey,
	&--has-skyline-mask {
		--bg-top: #{$grey--lightest};
		--bg-bottom: white;
	}

	&--bg-grey {
		background: $grey--lightest;
	}

	&--bg-offwhite {
		background: $offwhite;
	}

	&--bg-img {
		--color: white;
		--text-color: white;
		--link-hover-color: white;

		.slab__inner {
			color: var(--color);
			min-height: 50vmin;
		}
	}

	// Ripples

	&--has-ripple-top {
		@include mask-ripple-top();

		.slab__inner {
			padding: $wave-y-padding 0 $slab-padding;
		}
	}

	&--has-ripple-bottom {
		@include mask-ripple-bottom();

		.slab__inner {
			padding: $slab-padding 0 $wave-y-padding;
		}
	}

	&--has-ripples {
		@include mask-ripples();

		.slab__inner {
			padding: $wave-y-padding 0;
		}
	}

	&--has-rainbow-ripple {
		&::before {
			content: '';
			position: absolute;
			top: math.div($wave-height, 6);
			display: block;
			aspect-ratio: 170 / 7;
			width: 100%;
			background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-rainbow-thick.svg');
			z-index: 1;

			@media (min-width: 45rem) {
				background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-rainbow.svg');
			}
		}

		.slab__inner {
			padding: calc(math.div($wave-height, 0.75) + #{$spacing-xl}) 0 $slab-padding;
		}
	}

	&--has-skyline-ripple {
		&::before {
			content: '';
			position: absolute;
			top: math.div($wave-height, 6);
			display: block;
			aspect-ratio: 170 / 29;
			width: 100%;
			background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-skyline.svg');
			z-index: 1;

			@media (min-width: 45rem) {
				background: center center / 100% no-repeat url('#{$assets-directory}/img/ripple-skyline.svg');
			}
		}

		.slab__inner {
			padding: calc(math.div($wave-height, 0.5) + #{$spacing-xl}) 0 $slab-padding;
		}
	}

	&--has-skyline-mask {
		mask-image: url('#{$assets-directory}/img/mask-skyline.svg'), linear-gradient(black, black);
		mask-position: top, bottom;
		mask-size: 105% $wave-height*2.5, 100% calc(100% - $wave-height*2.5 + 2px); // 2px is nasty but overlaps rounding errors resulting in a gap in mask images
		mask-repeat: no-repeat;

		.slab__inner {
			padding: calc(math.div($wave-height, 0.5) + #{$spacing-xl}) 0 $slab-padding;
		}
	}
}