@use '../mixins/breakpoints' as break;
@use '../variables/images' as *;
@use '../functions' as *;

.decoration-bg {
	pointer-events: none;

	&.dot-wave {
		position: absolute;
		inset: 0;
		background-size: contain;
		mix-blend-mode: screen;
		z-index: -1;
		padding-bottom: 28rem;

		&-1 {
			background: transparent
				url('#{$brandui-images}decorations/decoration-bg-dot-wave.svg') center
				no-repeat;

			&.dot-wave-center-right {
				top: 20rem;
				right: -50rem;
				scale: 1;
				transform: rotateY(180deg);
			}

			&.dot-wave-center-middle {
				top: 33rem;
				right: -2rem;
				scale: 1.25;
				transform: rotateY(180deg);
			}
		}

		// not used yet
		&-2 {
			background: transparent
				url('#{$brandui-images}decorations/decoration-bg-dot-wave-2.svg') center
				no-repeat;
		}

		// Card Decoration
		&-3 {
			background: transparent
				url('#{$brandui-images}decorations/decoration-bg-dot-wave-3.svg') center
				no-repeat;

			&.dot-wave-bottom-right {
				bottom: -10rem;
				right: -40rem;
				transform: rotate(180deg);
			}
		}

		// Tracks positon - default
		&-top-right {
			top: 0;
			right: -40rem;

			// Mirror of dot-wave-top-left-high for a right-positioned dot-wave.
			// Without it, a right-side dot-wave keeps the base `inset: 0`
			// full-height box and its centered background renders mid-hero
			// instead of at the top.
			&-high {
				top: -75rem;
				right: -60rem;
				transform: rotate(180deg);

				@include break.max-tablet {
					top: -60rem;
					right: -13rem;
				}

				@include break.max-mobile {
					top: -40rem;
					right: -10rem;
				}
			}
		}

		&-bottom-right {
			bottom: -10rem;
			right: -40rem;
		}

		&-top-left {
			top: -20rem;
			left: -50rem;
			transform: rotate(180deg);

			@include break.max-mobile {
				top: -30rem;
			}

			&-high {
				top: -75rem;
				left: -60rem;
				transform: rotate(180deg);

				@include break.max-tablet {
					top: -60rem;
					left: -13rem;
				}

				@include break.max-mobile {
					top: -40rem;
					left: -10rem;
				}
			}
		}

		&-bottom-left {
			bottom: -5rem;
			left: -40rem;
		}

		&-center-right {
			top: 30rem;
			right: -26rem;
		}
	}
}