////
/// @group Root
/// Root - Defined all the CSS variables

///
:root {
	/*! Typography - Size */
	@each $type, $value in $osui-typography-heading-sizes {
		--font-size-h#{$type}: #{$value};
	}

	@each $type, $value in $osui-typography-sizes {
		--font-size-#{$type}: #{$value};
	}

	/*! Typography - Weight */
	@each $type, $value in $osui-typography-weight {
		--font-#{$type}: #{$value};
	}

	/*! Color - Brand */
	@each $type, $value in $osui-colors-brand {
		--color-#{$type}: #{$value};
	}

	/*! Color - Focus */
	@each $type, $value in $osui-colors-focus {
		--color-focus-#{$type}: #{$value};
	}

	/*! Color - Extended */
	@each $color, $variations in $osui-colors-extended {
		@each $type, $value in $variations {
			@if ($type == '') {
				--color-#{$color}: #{$value};
			} @else {
				--color-#{$color}-#{$type}: #{$value};
			}
		}
	}

	/*! Color - Neutral */
	@each $type, $value in $osui-colors-neutral {
		--color-neutral-#{$type}: #{$value};
	}

	/*! Color - Semantic */
	@each $type, $value in $osui-colors-semantic {
		--color-#{$type}: #{$value};
	}

	/*! Overlays */
	--overlay-background: #{$osui-overlay-background};

	/*! Space - Sizes */
	@each $type, $value in $osui-sizes {
		--space-#{$type}: #{$value};
	}

	/*! Border Radius */
	@each $type, $value in $osui-border-radius-types {
		--border-radius-#{$type}: #{$value};
	}

	/*! Border Size */
	@each $type, $value in $osui-border-size {
		--border-size-#{$type}: #{$value};
	}

	/*! Elevation / Shadow */
	@each $type, $value in $osui-shadow-types {
		--shadow-#{$type}: #{$value};
	}

	/*! App Settings */
	--header-color: #{$header-color};
	--color-background-body: #{$color-background-body};
	--color-background-login: #{$color-background-login};
	--header-size: #{$header-size};
	--header-size-content: #{$header-size-content};
	--side-menu-size: #{$side-menu-size};
	--bottom-bar-size: #{$bottom-bar-size};
	--footer-height: #{$footer-height};

	/*! Set the StatusBar variable that will be overwritten when it will be enable due to miss calculations! */
	--status-bar-height: 0px;

	/*! iOS Safe Areas (Notch Support) */
	--os-safe-area-top: env(safe-area-inset-top);
	--os-safe-area-right: env(safe-area-inset-right);
	--os-safe-area-bottom: env(safe-area-inset-bottom);
	--os-safe-area-left: env(safe-area-inset-left);

	/*! Layer System */
	--layer-system-scale: 5;
	--layer-above: var(--layer-system-scale); /* use this for all values above the base */
	--layer-below: calc(-1 * var(--layer-system-scale)); /* and this for all values below the base */

	/*! Global Layers */
	/* Main */
	--layer-global-screen: 0;
	--layer-global-elevated: calc(var(--layer-above) + var(--layer-global-screen)); // 5
	--layer-global-navigation:  calc(var(--layer-above) + var(--layer-global-elevated)); // 10
	--layer-global-off-canvas:  calc(var(--layer-above) + var(--layer-global-navigation)); // 15
	--layer-global-instant-interaction:  calc(var(--layer-above) + var(--layer-global-off-canvas)); // 20

	/*! Auxiliary */
	--layer-global-negative: -1;
	--layer-global-auto: auto; 

	/*! Local Layers */
	--layer-local-tier-1: 1;
	--layer-local-tier-2: 2;
	--layer-local-tier-3: 3;
	--layer-local-tier-4: 4;
	--layer-local-tier-5: 5;

	/*! Fixed/Absolute Patterns that need their variables on a global level to be referenced on all DOM contexts */
	--osui-bottom-sheet-layer: var(--layer-global-off-canvas);
	--osui-notification-layer: var(--layer-global-instant-interaction);
	--osui-popup-layer: var(--layer-global-off-canvas);
	--osui-sidebar-layer: var(--layer-global-off-canvas);
	--osui-menu-layer: calc(var(--layer-global-navigation) + var(--layer-local-tier-2));
}