@use 'sass:map';
@use 'sass:string';
@use '../base/maps/tokens' as *;
@use '../base/mixins/breakpoints' as breaks;
@use '../base/mixins/glass' as glass;
@use '../base/mixins/gradient-border' as gradient;
@use '../base/functions' as *;
@use './decorations/backgrounds' as *;

$position-spaces: (
	none,
	hairline,
	thin,
	slim,
	extra-small,
	small,
	medium,
	large,
	extra-large,
	huge
);

.wide-wrapper,
.wide-container,
.content-block,
.brandui-section,
.brandui-container {
	z-index: 0;
	position: relative;
}

.wide-wrapper,
.wide-container,
.wide-container-max,
.wide-wrapper-outer-content {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.wide-container-max {
	max-width: 2560px;
}

.wide-wrapper-outer-content {
	width: calc(100vw - 2.25rem);
}

.content-block {
	max-width: calc((var(--content-max) / 12) * 12);
	width: calc(100vw - var(--padding-huge));
	margin-right: auto;
	margin-left: auto;

	@media (width <=580px) {
		width: calc(100vw - var(--padding-extra-large));
	}
}

.brandui-section {
	margin: var(--padding-huge) 0;
	padding: 0 var(--padding-huge) var(--padding-extra-large);
	display: block;
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	box-sizing: border-box;

	.section {
		&-intro {
			max-width: brandui-col-spacing(6);
			margin: auto;
			margin-bottom: var(--padding-huge);
			display: flex;
			flex-direction: column;
			gap: var(--padding-medium);
			align-items: center;
			text-align: center;

			&.solo-title {
				margin-bottom: var(--padding-large);
			}

			&-left-aligned {
				@extend .section-intro;

				align-items: start;
				text-align: left;
				margin: 0;
				margin-bottom: var(--padding-huge);
				max-width: brandui-col-spacing(8);
			}
		}
	}

	@include breaks.max-tablet {
		padding: 0 var(--padding-extra-large) var(--padding-medium);
	}

	@include breaks.max-mobile {
		padding: 0 var(--padding-large) var(--padding-small);
	}
}

.brandui-container {
	max-width: var(--content-max);
	margin-left: auto;
	margin-right: auto;
}

.brandui-backdrop {
	background: with-opacity(var(--ui-accent), 90);
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	inset: 0;
	z-index: 100;
}

@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

		.#{$device-prefix}border-box {
			box-sizing: border-box;
		}

		.#{$device-prefix}content-box {
			box-sizing: content-box;
		}

		@for $i from -100 through -1 {
			.#{$device-prefix}-z#{$i} {
				z-index: $i;
			}
		}

		@for $i from 0 through 100 {
			.#{$device-prefix}z-#{$i} {
				z-index: $i;
			}
		}

		.#{$device-prefix}inset,
		.#{$device-prefix}inset-0 {
			inset: 0;
		}

		.#{$device-prefix}top-0 {
			top: 0;
		}

		.#{$device-prefix}right-0 {
			right: 0;
		}

		.#{$device-prefix}bottom-0 {
			bottom: 0;
		}

		.#{$device-prefix}left-0 {
			left: 0;
		}

		@each $space-key in $position-spaces {
			$space: var(--padding-#{$space-key});

			.#{$device-prefix}top-#{$space-key} {
				top: $space;
			}

			.#{$device-prefix}right-#{$space-key} {
				right: $space;
			}

			.#{$device-prefix}bottom-#{$space-key} {
				bottom: $space;
			}

			.#{$device-prefix}left-#{$space-key} {
				left: $space;
			}
		}

		.#{$device-prefix}d-none,
		.#{$device-prefix}hover\:d-none:hover,
		.#{$device-prefix}focus\:d-none:focus,
		.#{$device-prefix}focus-within\:d-none:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-none {
			display: none;
		}

		.#{$device-prefix}d-block,
		.#{$device-prefix}hover\:d-block:hover,
		.#{$device-prefix}focus\:d-block:focus,
		.#{$device-prefix}focus-within\:d-block:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-block {
			display: block;
		}

		.#{$device-prefix}d-inline-block,
		.#{$device-prefix}hover\:d-inline-block:hover,
		.#{$device-prefix}focus\:d-inline-block:focus,
		.#{$device-prefix}focus-within\:d-inline-block:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-inline-block {
			display: inline-block;
		}

		.#{$device-prefix}d-flex,
		.#{$device-prefix}hover\:d-flex:hover,
		.#{$device-prefix}focus\:d-flex:focus,
		.#{$device-prefix}focus-within\:d-flex:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-flex {
			display: flex;
		}

		.#{$device-prefix}d-inline-flex,
		.#{$device-prefix}hover\:d-inline-flex:hover,
		.#{$device-prefix}focus\:d-inline-flex:focus,
		.#{$device-prefix}focus-within\:d-inline-flex:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-inline-flex {
			display: inline-flex;
		}

		.#{$device-prefix}d-grid,
		.#{$device-prefix}hover\:d-grid:hover,
		.#{$device-prefix}focus\:d-grid:focus,
		.#{$device-prefix}focus-within\:d-grid:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-grid {
			display: grid;
		}

		.#{$device-prefix}d-inline-grid,
		.#{$device-prefix}hover\:d-inline-grid:hover,
		.#{$device-prefix}focus\:d-inline-grid:focus,
		.#{$device-prefix}focus-within\:d-inline-grid:focus-within,
		.#{$device-prefix}group:hover .group-hover\:d-inline-grid {
			display: inline-grid;
		}

		.#{$device-prefix}p-static,
		.#{$device-prefix}hover\:p-static:hover,
		.#{$device-prefix}focus\:p-static:focus,
		.#{$device-prefix}focus-within\:p-static:focus-within,
		.#{$device-prefix}group:hover .group-hover\:p-static {
			position: static;
		}

		.#{$device-prefix}p-fixed,
		.#{$device-prefix}hover\:p-fixed:hover,
		.#{$device-prefix}focus\:p-fixed:focus,
		.#{$device-prefix}focus-within\:p-fixed:focus-within,
		.#{$device-prefix}group:hover .group-hover\:p-fixed {
			position: fixed;
		}

		.#{$device-prefix}p-absolute,
		.#{$device-prefix}hover\:p-absolute:hover,
		.#{$device-prefix}focus\:p-absolute:focus,
		.#{$device-prefix}focus-within\:p-absolute:focus-within,
		.#{$device-prefix}group:hover .group-hover\:p-absolute {
			position: absolute;
		}

		.#{$device-prefix}p-relative,
		.#{$device-prefix}hover\:p-relative:hover,
		.#{$device-prefix}focus\:p-relative:focus,
		.#{$device-prefix}focus-within\:p-relative:focus-within,
		.#{$device-prefix}group:hover .group-hover\:p-relative {
			position: relative;
		}

		.#{$device-prefix}p-sticky,
		.#{$device-prefix}hover\:p-sticky:hover,
		.#{$device-prefix}focus\:p-sticky:focus,
		.#{$device-prefix}focus-within\:p-sticky:focus-within,
		.#{$device-prefix}group:hover .group-hover\:p-sticky {
			position: sticky;
		}

		.#{$device-prefix}overflow-hidden,
		.#{$device-prefix}hover\:overflow-hidden:hover,
		.#{$device-prefix}focus\:overflow-hidden:focus,
		.#{$device-prefix}focus-within\:overflow-hidden:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-hidden {
			overflow: hidden;
		}

		.#{$device-prefix}overflow-x-hidden,
		.#{$device-prefix}hover\:overflow-x-hidden:hover,
		.#{$device-prefix}focus\:overflow-x-hidden:focus,
		.#{$device-prefix}focus-within\:overflow-x-hidden:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-x-hidden {
			overflow-x: hidden;
		}

		.#{$device-prefix}overflow-y-hidden,
		.#{$device-prefix}hover\:overflow-y-hidden:hover,
		.#{$device-prefix}focus\:overflow-y-hidden:focus,
		.#{$device-prefix}focus-within\:overflow-y-hidden:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-y-hidden {
			overflow-y: hidden;
		}

		.#{$device-prefix}overflow-clip,
		.#{$device-prefix}hover\:overflow-clip:hover,
		.#{$device-prefix}focus\:overflow-clip:focus,
		.#{$device-prefix}focus-within\:overflow-clip:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-clip {
			overflow: clip;
		}

		.#{$device-prefix}overflow-x-clip,
		.#{$device-prefix}hover\:overflow-x-clip:hover,
		.#{$device-prefix}focus\:overflow-x-clip:focus,
		.#{$device-prefix}focus-within\:overflow-x-clip:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-x-clip {
			overflow-x: clip;
		}

		.#{$device-prefix}overflow-y-clip,
		.#{$device-prefix}hover\:overflow-y-clip:hover,
		.#{$device-prefix}focus\:overflow-y-clip:focus,
		.#{$device-prefix}focus-within\:overflow-y-clip:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-y-clip {
			overflow-y: clip;
		}

		.#{$device-prefix}overflow-visible,
		.#{$device-prefix}hover\:overflow-visible:hover,
		.#{$device-prefix}focus\:overflow-visible:focus,
		.#{$device-prefix}focus-within\:overflow-visible:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-visible {
			overflow: visible;
		}

		.#{$device-prefix}overflow-x-visible,
		.#{$device-prefix}hover\:overflow-x-visible:hover,
		.#{$device-prefix}focus\:overflow-x-visible:focus,
		.#{$device-prefix}focus-within\:overflow-x-visible:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-x-visible {
			overflow-x: visible;
		}

		.#{$device-prefix}overflow-y-visible,
		.#{$device-prefix}hover\:overflow-y-visible:hover,
		.#{$device-prefix}focus\:overflow-y-visible:focus,
		.#{$device-prefix}focus-within\:overflow-y-visible:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-y-visible {
			overflow-y: visible;
		}

		.#{$device-prefix}overflow-scroll,
		.#{$device-prefix}hover\:overflow-scroll:hover,
		.#{$device-prefix}focus\:overflow-scroll:focus,
		.#{$device-prefix}focus-within\:overflow-scroll:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-scroll {
			overflow: scroll;
		}

		.#{$device-prefix}overflow-x-scroll,
		.#{$device-prefix}hover\:overflow-x-scroll:hover,
		.#{$device-prefix}focus\:overflow-x-scroll:focus,
		.#{$device-prefix}focus-within\:overflow-x-scroll:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-x-scroll {
			overflow-x: scroll;
		}

		.#{$device-prefix}overflow-y-scroll,
		.#{$device-prefix}hover\:overflow-y-scroll:hover,
		.#{$device-prefix}focus\:overflow-y-scroll:focus,
		.#{$device-prefix}focus-within\:overflow-y-scroll:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-y-scroll {
			overflow-y: scroll;
		}

		.#{$device-prefix}overflow-auto,
		.#{$device-prefix}hover\:overflow-auto:hover,
		.#{$device-prefix}focus\:overflow-auto:focus,
		.#{$device-prefix}focus-within\:overflow-auto:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-auto {
			overflow: auto;
		}

		.#{$device-prefix}overflow-x-auto,
		.#{$device-prefix}hover\:overflow-x-auto:hover,
		.#{$device-prefix}focus\:overflow-x-auto:focus,
		.#{$device-prefix}focus-within\:overflow-x-auto:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-x-auto {
			overflow-x: auto;
		}

		.#{$device-prefix}overflow-y-auto,
		.#{$device-prefix}hover\:overflow-y-auto:hover,
		.#{$device-prefix}focus\:overflow-y-auto:focus,
		.#{$device-prefix}focus-within\:overflow-y-auto:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-y-auto {
			overflow-y: auto;
		}

		.#{$device-prefix}overflow-hidden,
		.#{$device-prefix}hover\:overflow-hidden:hover,
		.#{$device-prefix}focus\:overflow-hidden:focus,
		.#{$device-prefix}focus-within\:overflow-hidden:focus-within,
		.#{$device-prefix}group:hover .group-hover\:overflow-hidden {
			overflow: hidden;
		}

		// Use for locking the body element for modals and similar scenarios
		.#{$device-prefix}scroll-lock {
			overflow: hidden !important;
		}

		// Device Breakpoints End
	}
}