@import '../_global';

// Absolute Header
body {
	&:not(.admin-bar) {
		#{$themePrefix} {
			&-header {
				#{$varPrefix}-t: 0;
			}
		}
	}
}

//Theme CSS

#{$themePrefix} {
	//Absolute Header
	&-header {
		#{$varPrefix}-pos: absolute;
		#{$varPrefix}-t: var(--wp-admin--admin-bar--height);
		#{$varPrefix}-l: 0;
		#{$varPrefix}-r: 0;
		#{$varPrefix}-z-idx: 9;
	}

	// Hero Banner
	&-hero {
		&-banner {
			#{$varPrefix}-pos: relative;
			@include respond-below(md) {
				min-height: 60vh !important;
			}
			&-content {
				#{$varPrefix}-pos: relative;
				#{$varPrefix}-z-idx: 2;
			}

			&--img {
				@include respond-above(md) {
					#{$varPrefix}-pos: absolute;
					#{$varPrefix}-b: 0px;
					#{$varPrefix}-r: 20px;
				}
				@include respond-above(lg) {
					width: 40%;
				}
				@include respond-between(md, lg) {
					.wp-block-image {
						img {
							width: 600px !important;
						}
					}
				}
			}
		}
	}

	//Global Height & Width
	&-is-h-w {
		&-40 {
			$hw40: 40px;
			#{$varPrefix}-h: $hw40;
			#{$varPrefix}-w: $hw40;
		}

		&-70 {
			$hw70: 70px;
			#{$varPrefix}-h: $hw70;
			#{$varPrefix}-w: $hw70;
		}
	}

	//Global SVG Color and Spacing
	&-svg {
		&-icon {
			#{$varPrefix}-cl: var(--wp--preset--color--primary);
			#{$varPrefix}-m: 0 0 30px 0;
			&-white {
				#{$varPrefix}-cl: var(--wp--preset--color--default);
			}
		}
	}
	&-pos-sty {
		&-1 {
			#{$varPrefix}-pos: relative;
		}
		&-cont {
			#{$varPrefix}-pos: absolute;
			#{$varPrefix}-b: -30px;
			#{$varPrefix}-r: 30px;
			&-1 {
				#{$varPrefix}-pos: absolute;
				#{$varPrefix}-b: 0;
				#{$varPrefix}-r: 50px;
				@include respond-below(md) {
					.wp-block-image {
						img {
							width: 150px !important;
						}
					}
				}
				@include respond-between(md, lg) {
					.wp-block-image {
						img {
							width: 300px !important;
						}
					}
				}
			}
		}
	}
}
