/*
 * HTML Tag
*/

html {
	font-size: ~"@{base_font_size}px";
}

html {

	&:before {
		content: 'tablet: @{wrapper_width}, mobile: @{mobile_width}, flyout: @{flyout_breakpoint}, medium: @{medium_width}, product_small: @{product_sidebar_mobile_breakpoint}';
		position: absolute;
		top: 0;
		visibility: hidden;
	}
}

/*
* Styleguide helpers
 */
.styleGuideWrap {

	.darkBg {
		background: var(--dark_color);

		.styleGuideSectionTitle {
			color: #fff;
		}
	}

	.lightBg {
		background: var(--light_color);
	}
}

.spacers {
	height: 4px;
	background: var(--primary_color);
	width: 100%;
	float: none;
	clear: both;

	&.white {
		background: #fff;
	}
}

.screenreader {
	position: absolute !important;
	height: 1px; width: 1px;
	overflow: hidden;
	clip: rect(1px 1px 1px 1px);
	clip: rect(1px, 1px, 1px, 1px);
}

#tp-widget-loader {
	display: none !important;
}

.siteWrapper {
	position: relative;
	min-height: 100%;

	&.mobileAssessment {
		@media @flyout {
			padding-bottom: 88px;
		}
	}

	&.requiresSticky {
		overflow: visible !important;
	}
}

.siteInnerWrapper {
	width: 100%;
	position: initial;
	//z-index: 2;
	background: #fff;

	&.bundleOverlayOpen {
		position: initial;
	}

	.whiteBackground & {
		background: #fff;
	}
}


