@use "sass:math";
/* variables specific to current element */
$snet-frame-menu-width-collapsed: $snet-frame-menu-width-collapsed-global;
$snet-frame-nav-topbar-height: $nav-topbar-height-global;
$snet-frame-top-padding: $snet-frame-nav-topbar-height;
$snet-frame-user-dropdown-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-client-zone-height: map-deep-get($token-sizes-component-map, "panel-header-height") - map-deep-get($token-spacer-unit-map, "8");
$snet-frame-main-horiz-padding-mobile: $snet-frame-main-horiz-padding-mobile-global;
$snet-frame-main-horiz-padding-desktop: $snet-frame-main-horiz-padding-desktop-global;
$snet-frame-menu-open-width: $snet-frame-menu-open-width-global;
$snet-frame-menu-list-vertical-padding-mobile: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-vertical-padding-desktop: map-deep-get($token-spacer-unit-map, "16");
$snet-frame-menu-list-horizontal-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-header-horizontal-padding: map-deep-get($token-spacer-unit-map, "8");
$snet-frame-menu-list-header-bottom-padding: map-deep-get($token-spacer-inset-map, "xl");
$snet-frame-menu-toggle-top-padding-top: map-deep-get($token-spacer-unit-map, "72");
$snet-frame-menu-transition-timing: 0.15s;

.#{$namespace}snetFrame {

	/* Save root element context for easy access if nesting is needed */

	$self: &;
	@include custom-prop-fallback-override("comp-snet-frame-background", "sys-color-elevation-surface-sunken");

	/* properties of current element  + media queries */

	position: relative;
	min-height: 100%;
	display: flex;
	flex-direction: column;
	background-color: $snet-frame-bg-global;
	background-color: var(--comp-snet-frame-background);
	//padding-top: $snet-frame-top-padding;

	/* Pseudo Elements */

	&::before {
	}

	&::after {
	}

	/*
	Include elements that are linked to the current element but have to reside at the root level of the stylesheet
	(e.g: keyframes)
	*/
	@at-root {
	}


	/* children - write selector in full in comments in order to facilitate search */

	// snetFrame__header
	&__header {

		position: sticky;
		z-index: z("fixed");
		top: 0;
		left: 0;
		right: 0;

	}

	// snetFrame__inner
	&__inner {

		// follows same logic as parent

		flex-grow: 1;
		display: flex;
		max-width: none;
		padding-right: 0;
		transition: padding-left $snet-frame-menu-transition-timing linear;
		background-color: inherit;

		&::after {
			content:""; // needed if absolutely positioned element were to stretch the body overflow
			position: fixed;
			z-index: z("negative");
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background-color: map-deep-get($token-color-brand-map, "secondary", "06");
			background-color: var(--comp-snet-frame-background);

		}

		@include media-breakpoint-up(lg){
			width: 100%;
			margin: 0 auto;
			padding-left: $snet-frame-menu-width-collapsed;
		}

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			max-width: map-deep-get($container-max-widths, "xl");
			padding-left: $snet-frame-menu-open-width;
		}


	}

	&__fader {

		position: absolute;
		z-index: z("zero");
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		opacity: 0;
		visibility: hidden;
		background-color: rgba(map-deep-get($token-color-brand-map, "secondary", "100"), 0.64);
		@include add-backdrop-filter(#{map-deep-get($token-spacer-unit-map, "8")});

		transition: opacity 0.15s 0.1s linear;

	}

	/* Frame Menu */

	/* shared properties */

	// frame menu shared properties

	&__menuContainer {

		position: fixed;
		z-index: z("sticky");
		bottom: 0;
		left: 0;
		right: 0;
		@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
		flex-shrink: 0;
		transition: width $snet-frame-menu-transition-timing linear;

		@include media-breakpoint-up(lg) {
			top: $nav-topbar-height-global;
			right: auto;
			width: $snet-frame-menu-width-collapsed;
			box-shadow: map-deep-get($token-shadow-map, "sidebar");
		}


		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			width: $snet-frame-menu-open-width;
			padding-top: 0;
			left: auto;
			right: calc(100% - #{$snet-frame-menu-open-width});
		}

		$menu-desktop-positioning: math.div(map-deep-get($container-max-widths, "xl"),2);

		@media screen and (min-width: #{map-deep-get($container-max-widths, "xl")}) {
			right: auto;
			left: calc(50% - #{$menu-desktop-positioning});
		}

		&::before {

			content: "";
			background-color: inherit;
			z-index: z("negative");
			position: absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: -50vw;
			height: 100%;

		}

	}

	&__menuClientZone {

		flex-shrink: 0;
		position: relative;
		z-index: z("low");
		height: $snet-frame-client-zone-height;
		border-bottom: $border-width solid;
		@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-moderate");

		/*
		*
		*  Leave this in case it is ever needed for mobile
		*
		*/

		//&.-isFloating {
		//
		//	@include media-breakpoint-between(xs,sm){
		//
		//		position: absolute;
		//		bottom: 100%;
		//		right: 0;
		//		width: $snet-frame-client-zone-height;
		//		border-bottom: 0;
		//
		//	}
		//
		//	#{$self}__menuItemText {
		//
		//		@include media-breakpoint-between(xs,sm){
		//			@include sr-only();
		//		}
		//
		//	}
		//
		//}

		+ #{$self}__menuList {

			padding-top: map-deep-get($token-spacer-unit-map, "8");

		}

	}

	&__menuClientZoneItem {

		position: absolute;
		bottom: 0;
		left: map-deep-get($token-radius-map, "8");
		width: 100%;

		&.-isDropdownDeactivated {

			bottom: map-deep-get($token-radius-map, "8");

		}

	}

	&__menuClientZoneDropdown {

		width: 100%;
		@include custom-prop-fallback("background-color", "comp-dropdown-background-color");
		@include spacer-component-inset("sm");
		border-top-left-radius: map-deep-get($token-radius-map, "32");
		border-top-right-radius: map-deep-get($token-radius-map, "32");
		margin-left: -(map-deep-get($token-radius-map, "8"));
		overflow: hidden;

		&.show.show.show {

			box-shadow: map-deep-get($token-shadow-map, "detail");
			overflow: visible;
			width: $snet-frame-menu-open-width;

			#{$self}__menuClientZoneDropdownTrigger {
				&::before {
					content: none;
				}
			}

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				width: 100%;
			}

		}

	}

	&__menuClientZoneDropdownMenu {

		border: none;
		z-index: z("zero");
		width: 100%;
		left: 0 !important;
		top: 100% !important;
		margin: 0;
		border-radius: 0;
		border-bottom-left-radius: map-deep-get($token-radius-map, "32");
		border-bottom-right-radius: map-deep-get($token-radius-map, "32");
		transform: none !important;
		@include spacer-component-inset("sm");
		@include spacer-component-stack("sm");
		box-shadow: map-deep-get($token-shadow-map, "detail");

		&::after {

			content: "";
			background-color: inherit;
			position: absolute;
			top: -(map-deep-get($token-spacer-unit-map, "16") - $border-width ); // readjustment needed to avoid jump effect
			left: 0;
			right: 0;
			height: map-deep-get($token-sizes-unit-map, "16");
			border-bottom: $border-width solid;
			@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-moderate");

		}

	}

	&__menuClientZoneDropdownTrigger {

		position: relative;
		z-index: z("low");

		&::before {

			content: $icon-chevrondown;
			@include icon-base;
			width: map-deep-get($token-sizes-unit-map, "16");
			height: map-deep-get($token-sizes-unit-map, "16");
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: map-deep-get($token-radius-map, "circle");
			@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");
			position: absolute;
			z-index: z("low");
			bottom: map-deep-get($token-spacer-unit-map, "4");
			right: map-deep-get($token-spacer-unit-map, "4");
			font-weight: bold;
			font-size: 85%;

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

				content: none;

			}

		}
	}

	&__menu {

		background-color: inherit;
		transition: width $snet-frame-menu-transition-timing linear;
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100%;

	}

	&__menuList {

		margin-bottom: 0;
		padding-top: map-deep-get($token-spacer-inline-map,"sm");
		padding-bottom: calc(#{$snet-frame-menu-list-vertical-padding-mobile} + env(safe-area-inset-bottom));

		@include media-breakpoint-up(lg){
			padding: $snet-frame-menu-list-vertical-padding-desktop $snet-frame-menu-list-horizontal-padding;
			@include spacer-component-stack('sm');
			background-color: inherit;
			width: 100%;
			height: 100%;
			display: flex;
			flex-direction: column;
			overflow-y: auto;
			overflow-x: hidden;
			flex-grow: 1;
		}

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			width: 100% !important;
		}

	}

	&__menuListHeader {

		padding: map-deep-get($token-spacer-inset-map, "sm") $snet-frame-menu-list-header-horizontal-padding $snet-frame-menu-list-header-bottom-padding;
		margin-bottom: map-deep-get($token-spacer-stack-max-map, "md");
		white-space: nowrap;
		position: relative;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			white-space: normal;
		}

		.-hasMenuOpen & {

			@include media-breakpoint-up(lg) {
				white-space: normal;
			}

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				white-space: nowrap;
			}

		}

	}

	#{$self}__menuListHeaderContent {

		width: $snet-frame-menu-open-width - ($snet-frame-menu-list-horizontal-padding*2)  - ($snet-frame-menu-list-header-horizontal-padding*2);

	}

	&__menuListHeaderSubtitle {
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
	}

	&__menuListHeaderShownOpen {

		display: none;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			display: block;
		}

		.-hasMenuOpen & {

			@include media-breakpoint-up(lg){
				display: block;
			}

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

				display: none;

			}

		}

	}

	&__menuListHeaderActions {

		white-space: nowrap;

		> * {
			white-space: nowrap;
		}

	}

	&__menuListHeaderHiddenOpen {
		display: block;
		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			display: none;
		}
		.-hasMenuOpen & {
			@include media-breakpoint-up(lg) {
				display: none;
			}
			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				display: block;
			}
		}
	}

	&__menuListHeaderProgress {

		position: absolute;
		top: 100%;
		left: -($snet-frame-menu-list-header-horizontal-padding);
		right: -($snet-frame-menu-list-header-horizontal-padding);

	}

	&__menuListInner {

		margin-bottom: 0;
		flex-grow: 1;
		display: flex;

		@include media-breakpoint-up(lg){
			@include spacer-component-stack('sm');
			display: block;
		}

	}

	&__menuItem {

		text-align: center;
		flex: 1;
		min-width: 0;

		/* @TODO take a look at this and see how / if it can be safely removed */
		@for $i from 1 through 10 {
			&:nth-of-type(#{$i}) {
				order: #{$i};
			}
		}

		@include media-breakpoint-up(lg){
			text-align: left;
			flex-grow: 0;
			min-width: $snet-frame-menu-width-collapsed-global - ($snet-frame-menu-list-horizontal-padding*2);
		}

		&.-isSeparator {

			padding-top: map-deep-get($token-spacer-inset-map, "sm");

			#{$self}__menuLink {

				position: relative;

				&::before {

					content: "";
					position: absolute;
					top: -(map-deep-get($token-spacer-unit-map, "8"));
					left: -(map-deep-get($token-spacer-inline-map, "sm"));
					right: -(map-deep-get($token-spacer-inline-map, "sm"));
					height: $border-width;
					@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");

				}

			}

			&:first-of-type {

				padding-top: 0;
				padding-bottom: map-deep-get($token-spacer-inset-map, "sm");

				#{$self}__menuLink {

					&::before {

						top: auto;
						bottom: -(map-deep-get($token-spacer-unit-map, "8"));
						padding-top: 0;

					}

				}

			}

		}

		&.-isSeparatorNoOffset {

			position: relative;
			padding-top: map-deep-get($token-spacer-inset-map, "sm");

			&::before {

				content: "";
				position: absolute;
				top: 0;
				left: map-deep-get($token-spacer-inline-map, "sm");
				right: map-deep-get($token-spacer-inline-map, "sm");
				height: $border-width;
				@include custom-prop-fallback("background-color", "sys-color-border-primary-subtle");


			}


		}

		&.-isStatic {

			#{$self}__menuLink {

				&:hover {

					background-color: transparent;
					cursor: default;

				}

			}

			#{$self}__menuItemCheckbox {

				cursor: default;

			}

		}

		&.-isActive {

			#{$self}__menuLink {
				@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
			}

			#{$self}__menuLinkBubble {
				[class*="icon"] {
					&::before {
						@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
						@include media-breakpoint-up(lg){
							@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
						}
					}
				}
			}

			#{$self}__menuLinkBubble {
				@include custom-prop-fallback("background-color", "sys-color-text-secondary-vivid","true","true");
			}

			#{$self}__menuItemText {
				color: inherit;
			}

		}

		&.-isOpen {

			#{$self}__submenu {

				display: block;

			}

		}

		&.-isFloating {

			@include media-breakpoint-between(xs,md){

				order: 4;

			}

			#{$self}__menuItemText {

				@include media-breakpoint-between(xs,md){
					@include sr-only();
				}

			}

		}

		&.-isHiddenMobile {

			display: none;

			@include media-breakpoint-up(lg) {
				display: flex;
			}

		}

	}

	&__menuItemCheckbox {

		display: none;
		width: map-deep-get($token-spacer-unit-map, "40");
		height: map-deep-get($token-spacer-unit-map, "40");
		position: absolute;
		top: 0;
		left: 0;
		font-size: map-deep-get($token-font-size-map,"body", "xl");
		border-radius: map-deep-get($token-radius-map, "circle");

	}

	&__menuLink {

		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
		width: 100%; /* if item is button */
		display: block;
		position: relative;

		@include media-breakpoint-up(lg){
			display: flex;
			align-items: center;
			flex-direction: row;
		}

		&[disabled] {
			@include custom-prop-fallback("color", "sys-color-text-primary-muted");
			pointer-events: none;
		}

	}

	&__menuLinkNotif {

		position: absolute;
		top: 0;
		padding: map-deep-get($token-spacer-inset-map, "xxs") map-deep-get($token-spacer-inset-map, "xs");
		left: $icon-circle-regular-dimensions-global;
		transform: translate(-25%, 50%);
		@include custom-prop-fallback("background-image", "sys-color-background-secondary-gradient");
		min-width: map-deep-get($token-spacer-unit-map, "16");
		height: map-deep-get($token-spacer-unit-map, "16");
		border-radius: map-deep-get($token-radius-map, "24");
		border: $border-width*2 solid;
		@include custom-prop-fallback("border-color", "sys-color-elevation-surface-flat");
		font-size: map-deep-get($token-font-size-map, "body", "3xs");
		@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");
		line-height: 1;
		font-weight: map-deep-get($token-font-weight-map, "bold");
	}

	&__menuLink,
	&__menuItemText {
		@include media-breakpoint-between(xs,md){
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
		}
	}

	&__submenuLink,
	&__submenuLinkIndicator {

		display: flex;
		align-items: center;

	}

	&__menuLink,
	&__submenuLink {

		padding-left: map-deep-get($token-spacer-inline-map, "sm");
		padding-right: map-deep-get($token-spacer-inline-map, "sm");
		border-radius: map-deep-get($token-radius-map, "32");
		transition: background-color $snet-frame-menu-transition-timing ease-in;
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");

		@include media-breakpoint-up(lg){
			@include spacer-component-inset("sm");
		}

		&:hover {

			@include media-breakpoint-up(lg){
				@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
				@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
			}

		}

	}

	&__menuItemText {
		display: block;
		line-height: map-deep-get($token-font-line-height-map, "m");
		@include media-breakpoint-up("lg") {
			flex-shrink: 0 !important;
		}
	}

	&__menuItemText,
	&__submenuItemText {

		@extend %textHelper3xs;
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
		flex: 1;

		@include media-breakpoint-between(xs,md){
			@include custom-prop-fallback("color", "sys-color-text-primary-muted");
		}

		@include media-breakpoint-up(lg){

			@include fluid-type($min_width, $max_width, $h5-font-size, $h5-font-size);
			font-family: map-deep-get($token-font-family-map, "headings");
			max-width: 230px;
			margin-right: auto;
			opacity: 0;
			padding-left: map-deep-get($token-spacer-unit-map, "16");
			overflow: visible;
			text-overflow: inherit;
			flex: 0 0 auto;

		}

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

			opacity: 1;
			flex-shrink: 1;

		}

	}

	&__menuLinkBubble {
		@include media-breakpoint-between(xs,md) {
			height: auto;
			background-color: transparent !important;
			@include custom-prop-fallback("color", "sys-color-text-primary-muted", "true", "true");

		}
	}

	&__submenu {
		display: none;
		margin-bottom: map-deep-get($token-spacer-unit-map, "8");
	}

	&__submenuItem {

		&.-isActive {

			#{$self}__submenuLink {
				@include custom-prop-fallback("color", "sys-color-text-secondary-vivid");
			}

			#{$self}__submenuItemText {
				color: inherit;
			}

			#{$self}__submenuLinkIndicator {

				&::before {

					background-color: currentColor;

				}

			}

		}

	}

	&__submenuLinkIndicator {

		width: 40px;
		height: 40px;
		flex-shrink: 0;
		justify-content: center;

		&::before {

			content: "";
			border-radius: map-deep-get($token-radius-map, "circle");
			@include custom-prop-fallback("background-color", "sys-color-background-primary-30");
			width: map-deep-get($token-sizes-unit-map, "8");
			height: map-deep-get($token-sizes-unit-map, "8");

		}

	}

	&__menuCountBadge {

		margin-left: map-deep-get($token-spacer-unit-map, "16");

	}

	&__menuDropdownPositioning {

		@include media-breakpoint-down(md) {

			bottom: calc(100% + #{map-deep-get($token-spacer-stack-max-map, "md")}) !important;
			left: 50% !important;
			transform: translateX(-50%) !important;
			top: auto !important;

		}

		width: calc(100% - (#{$snet-frame-main-horiz-padding-mobile}*2));

		@include media-breakpoint-up(sm) {

			max-width: 350px;

		}

		@include media-breakpoint-up(lg) {

			max-width: none;
			min-width: 350px;
			width: auto;
			left: calc(100% + #{map-deep-get($token-spacer-unit-map, "16")}) !important;
			top: map-deep-get($token-spacer-unit-map ,"8") !important;
			max-height: calc(100vh - env(safe-area-inset-bottom) - #{map-deep-get($token-sizes-component-map, "topbar-height")} - #{map-deep-get($token-spacer-unit-map, "16")});
			overflow-y: auto;

		}

	}


	/* Frame Main */

	&__main {

		padding-left: $snet-frame-main-horiz-padding-mobile;
		padding-right: $snet-frame-main-horiz-padding-mobile;
		padding-bottom: $nav-topbar-height-global;
		flex-grow: 1;
		min-width: 0; // FKIN OVERFLOW. FKIN. OVERFLOW. Never take this out or I kill you.
		position: relative;
		z-index: z("zero");
		display: flex;
		flex-direction: column;
		background-color: inherit;

		@media (orientation: landscape) {
			padding-left: calc(env(safe-area-inset-left) + #{$snet-frame-main-horiz-padding-mobile});
			padding-right: calc(env(safe-area-inset-right) + #{$snet-frame-main-horiz-padding-mobile});
		}

		@include media-breakpoint-up(sm) {
			padding-bottom: map-deep-get($token-spacer-unit-map, "32");
		}

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			padding-left: $snet-frame-main-horiz-padding-desktop;
			padding-right: $snet-frame-main-horiz-padding-desktop;
		}

	}

	&__mainHeader {

		margin: 0 (-$snet-frame-main-horiz-padding-mobile);
		padding: 0 $snet-frame-main-horiz-padding-mobile;
		background-color: inherit;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			margin: 0 (-$snet-frame-main-horiz-padding-desktop);
			padding: 0 $snet-frame-main-horiz-padding-desktop;
		}

		&.-headroom {

			position: sticky;
			z-index: z("sticky");
			top: $snet-frame-nav-topbar-height;
			transition: transform $snet-frame-main-header-transition-duration-global linear;

		}

		&.-headroomUnpinned.-headroomNotTop {
			transform: translateY(-100%);
		}

		&.-noPadding {

			padding: 0;

		}

	}

	&__mainHeader + &__mainContent {

		padding-top: 0;

	}

	&__mainContent {

		padding: $snet-frame-main-content-vertical-padding-desktop-global 0;
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		width: 100%;

	}


	/* Frame Menu Settings */

	// frame menu settings shared properties
	&__settingsButton,
	&__settingsButtonIcon,
	&__settingsItem {

		display: flex;
		align-items: center;

	}

	&__settings {

		margin-top: map-deep-get($token-spacer-unit-map, "64");
		margin-bottom: 0;
		@include spacer-component-stack('sm');
		position: sticky;
		bottom: 0;
		display: none;

		@include media-breakpoint-up(lg){
			display: block;
		}

		@supports (position: sticky) {
			margin-top: map-deep-get($token-spacer-unit-map, "24");
		}

	}

	&__settingsItem {

		position: relative;

	}

	&__settingsButton {

		@include spacer-component-inset('sm');
		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
		transition: color $snet-frame-menu-transition-timing linear;
		@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
		border-radius: map-deep-get($token-radius-map, "circle");

		&:hover,
		&:focus {

			#{$self}__settingsButtonIcon {

				@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");

			}

		}

	}

	&__settingsButtonIcon {

		width: map-deep-get($token-sizes-unit-map, "40");
		height: map-deep-get($token-sizes-unit-map, "40");
		justify-content: center;
		border-radius: map-deep-get($token-radius-map, "circle");

	}

	&__settingsButtonText {

		color: inherit;

	}

	&__settingsOpenMenu {

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			display: none;
		}

	}

	&__settingsCallTitle {

		display: block;
		@extend .h5;

	}

	&__settingsCallSubtitle {

		display: block;
		font-size: map-deep-get($token-font-size-map,"body", "s");
		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
		font-weight: map-deep-get($token-font-weight-map, "regular");

	}

	&__panelLoader {

		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 160px;
		height: 100%;

	}

	&__backToTop {

		position: sticky;
		padding-right: $opacity-background-inset-spacing-global;
		text-align: right;
		z-index: z("fixed");
		bottom: $snet-frame-main-content-vertical-padding-desktop-global + $opacity-background-inset-spacing-global;

		@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
			bottom: $snet-frame-main-content-vertical-padding-desktop-global + $opacity-background-inset-spacing-global;
		}

	}

	&__backToTopItem {

		&::before {

			box-shadow: map-deep-get($token-shadow-map, "active");

		}

	}

	/* modifiers */

	// snetFrame -hasMenuOpen
	&.-hasMenuOpen {

		@include media-breakpoint-up(lg) {
			#{$self}__fader {

				opacity: 1;
				visibility: visible;
				z-index: z("sticky");

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
					opacity: 0;
					visibility: hidden;

				}

			}

			#{$self}__menu {

				width: $snet-frame-menu-open-width;

			}

			#{$self}__menuItemText,
			#{$self}__submenuItemText,
			#{$self}__settingsCallText {

				opacity: 1;
				transition: opacity 0.1s 0.1s linear,
				flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
			;
				flex-shrink: 1;

			}

			#{$self}__settingsCall {

				width: auto;

			}

			#{$self}__settingsButtonIcon {

				transform: rotateY(180deg);

			}

			#{$self}__menuClientZoneDropdownTrigger {

				&::before {

					display: none;

				}

			}
		}

	}

	// snetFrame -noMenu
	&.-noMenu {

		// follows same logic as base element

		#{$self}__inner {

			padding-left: 0;

		}

		#{$self}__main {

			padding-left: 0;
			padding-right: 0;

		}

		.#{$namespace}frameContentBottomBar {

			&__container {

				padding-left: $snet-frame-main-horiz-padding-mobile-global;
				padding-right: $snet-frame-main-horiz-padding-mobile-global;

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
					padding-left: $snet-frame-main-horiz-padding-desktop-global;
					padding-right: $snet-frame-main-horiz-padding-desktop-global;
				}

			}

		}

	}

	&.-bgWhite,
	&.-bgInverted {

		@include custom-prop-fallback-override("comp-snet-frame-background", "sys-color-elevation-surface-flat");
		background-color: #ffffff;
		background-color: var(--comp-snet-frame-background);
		#{$self}__mainHeader {

			background-color: #ffffff;
			background-color: var(--comp-snet-frame-background);

		}

	}

	&.-contentCentered {

		#{$self}__main {

			@include media-breakpoint-up(md){
				margin: auto;
			}

		}

	}

	&.-hasBottomBar {

		#{$self}__mainContent {

			padding-bottom: $frame-content-bottom-bar-min-height-global;

		}

		#{$self}__backToTop {

			bottom: $frame-content-bottom-bar-min-height-global + $snet-frame-main-content-vertical-padding-desktop-global*0.5 + $opacity-background-inset-spacing-global;

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				bottom: $frame-content-bottom-bar-min-height-global + $snet-frame-main-content-vertical-padding-desktop-global*0.5 + $opacity-background-inset-spacing-global;
			}

		}


	}

	&.-step {

		&.-hasMenuOpen {

			@include media-breakpoint-up(lg) {

				#{$self}__menuItem {

					&.-isActive {

						#{$self}__menuLink {

							@include custom-prop-fallback("background-color", "sys-color-background-primary-10");

						}

					}

				}

			}

		}

		#{$self}__menuContainer {
			display: none;

			@include media-breakpoint-up(lg){
				display: block;
			}
		}

		#{$self}__menuItem {

			&.-isActive {

				#{$self}__menuLink {

					@include custom-prop-fallback("color", "sys-color-text-primary-vivid");

					@media screen and (min-width: map-get($tweakpoint-map, "tablet")){

						@include custom-prop-fallback("background-color", "sys-color-background-primary-10");

					}
				}

				#{$self}__menuItemText {

					@include custom-prop-fallback("color", "sys-color-text-primary-vivid");

				}

				#{$self}__menuItemProgress {

					display: block;

					.#{$namespace}circularProgress__shape {

						@include custom-prop-fallback("stroke", "sys-color-border-status-success-strong");

					}

				}

			}

			&.-isChecked {

				#{$self}__menuItemCheckbox {

					display: flex;
					align-items: center;
					justify-content: center;
					@include custom-prop-fallback("border-color", "sys-color-border-status-success-strong");
					@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");

				}

				#{$self}__menuItemText {

					@include custom-prop-fallback("color", "sys-color-text-primary-vivid");

				}

				&.-mandatoryFilled {

					#{$self}__menuItemCheckbox {

						@include custom-prop-fallback("border-color", "sys-color-border-status-warning-strong");
						@include custom-prop-fallback("background-color", "sys-color-background-status-warning-100");
					}

				}

			}

		}

		#{$self}__submenuItem {

			&.-completed,
			&.-inProgress,
			&.-mandatoryFilled {
				#{$self}__submenuLink {
					@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
				}
			}

			&.-completed {
				#{$self}__submenuLinkIndicator {
					&::before {
						@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
					}
				}
			}
			&.-inProgress {
				#{$self}__submenuLinkIndicator {
					&::before {
						@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
					}
				}
			}
			&.-mandatoryFilled {
				#{$self}__submenuLinkIndicator {
					&::before {
						@include custom-prop-fallback("background-color", "sys-color-background-status-warning-100");
					}
				}
			}
			&.-isActive {
				#{$self}__submenuLinkIndicator {
					position: relative;
					z-index: z("zero");
					&::after {
						content: "";
						width: map-deep-get($token-sizes-unit-map, "16");
						height: map-deep-get($token-sizes-unit-map, "16");
						position: absolute;
						z-index: z("negative");
						border-radius: map-deep-get($token-radius-map, "circle");
						top: 50%;
						left: 50%;
						transform: translate(-50%,-50%);
						@include custom-prop-fallback("background-color", "sys-color-background-secondary-30");
					}
				}
			}

		}

		#{$self}__menuItemProgress {

			width: 115%;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);

		}

		#{$self}__menuItemStep {

			position: relative;
			width: map-deep-get($token-spacer-unit-map, "40");
			height: map-deep-get($token-spacer-unit-map, "40");
			border-radius: map-deep-get($token-radius-map, "circle");
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
			font-family: map-deep-get($token-font-family-map, "headings");

		}

		#{$self}__menuItemText {

			font-family: map-deep-get($token-font-family-map, "text");
			font-weight: map-deep-get($token-font-weight-map, "semi-bold");

		}

		#{$self}__submenuItemText {

			font-family: map-deep-get($token-font-family-map, "text");

		}

		#{$self}__main {

			padding: $snet-frame-main-horiz-padding-mobile;
			overflow: hidden;

			padding-left: calc(env(safe-area-inset-left) + #{$snet-frame-main-horiz-padding-mobile});
			padding-right: calc(env(safe-area-inset-right) + #{$snet-frame-main-horiz-padding-mobile});

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				padding: math.div($snet-frame-main-horiz-padding-desktop,2) $snet-frame-main-horiz-padding-desktop;
			}

		}

		#{$self}__mainContent {

			height: 100%;
			padding: 0;

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				padding-top: map-deep-get($token-spacer-stack-max-map, "xs");
				padding-bottom: map-deep-get($token-spacer-stack-max-map, "xs");
			}

		}

	}

	&.-contentLoading {

		#{$self}__mainContent {

			position: relative;

			&::before {

				content: "";
				position: absolute;
				opacity: 0.4;
				z-index: z("medium");
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				@include custom-prop-fallback("background-color", "sys-color-background-primary-6");


			}

		}

	}

	/* @TODO get rid of this shite ASAP */
	&.-spkCustomFrame {

		.new-styles {

			display: flex;
			flex-direction: column;
			min-height: 100%;
			flex-grow: 1;

			& > div {

				display: flex;
				flex-direction: column;
				min-height: 100%;
				flex-grow: 1;

			}

		}

	}

	/* Frame rakes all available witdh */
	&.-fullWidth {

		#{$self}__inner {
			max-width: none;
		}
		#{$self}__menuContainer {
			left: 0;
		}

	}

	&.-storeContext {

		#{$self}__main {

			padding-left: 0 !important;
			padding-right: 0 !important;

		}

		#{$self}__mainContent {

			padding-top: map-deep-get($token-spacer-stack-max-map, "lg");

			.container,
			.container-fluid {

				@include containerPaddingInline();

			}

			.#{$namespace}stripContainerPadding {

				.container,
				.container-fluid {

					padding-left: 0;
					padding-right: 0;

				}

			}

		}

		#{$self}__mainHeader {

			margin-left: 0 !important;
			margin-right: 0 !important;

		}

	}

	/*
	 * menu toggle button is placed above all menu items
	 *
	 *	DOES NOT WORK WITH DROPDOWN IN MENU
	 *
	 */
	&.-menuToggleTop {

		#{$self}__menuList {

			padding-top: $snet-frame-menu-toggle-top-padding-top;

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				position: relative;
				padding-top: $snet-frame-menu-list-vertical-padding-desktop;
			}

		}

		&.-hasMenuOpen {

			#{$self}__menuList {

				@include media-breakpoint-up(lg){
					position: relative;
					padding-top: $snet-frame-menu-list-vertical-padding-desktop;
				}

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
					position: static;
					padding-top: $snet-frame-menu-toggle-top-padding-top;
				}

			}

		}

		#{$self}__menuListHeaderContent {

			width: ($snet-frame-menu-open-width*(0.75));

		}

		#{$self}__settings {

			position: static;

		}

		#{$self}__settingsOpenMenu {

			position: absolute;
			z-index: z("low");
			top: $snet-frame-menu-list-vertical-padding-mobile;

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				right: $snet-frame-menu-list-horizontal-padding;
			}

		}

		&.-hasMenuOpen {

			#{$self}__settingsOpenMenu {

				@include media-breakpoint-up(lg) {
					right: $snet-frame-menu-list-horizontal-padding;
				}

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
					right: auto;
				}

			}

		}

	}

	&.-menuToggleVisible {

		#{$self}__menuItemText,
		#{$self}__submenuItemText,
		#{$self}__settingsCallText {

			flex: 0 0 auto;

		}

		#{$self}__settingsButtonIcon {

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				transform: rotateY(180deg);
			}

		}

		#{$self}__settingsOpenMenu {

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
				display: flex;
			}

		}

		// snetFrame -hasMenuOpen
		&.-hasMenuOpen,
		&.-menuHiddenDesktop {

			@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

				#{$self}__inner {
					padding-left: $snet-frame-menu-width-collapsed;
				}

				#{$self}__menuContainer {
					width: $snet-frame-menu-width-collapsed;
					right: calc(100% - $snet-frame-menu-width-collapsed);
				}

				#{$self}__fader {

					opacity: 0;
					visibility: hidden;

				}

				#{$self}__menu {

					width: $snet-frame-menu-width-collapsed;

				}

				#{$self}__menuItemText,
				#{$self}__submenuItemText,
				#{$self}__settingsCallText {

					opacity: 1;
					transition: opacity 0.1s 0.1s linear,
					flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
				;

				}

				#{$self}__menuLink {

				}

				#{$self}__settingsCall {

					width: auto;

				}

				#{$self}__settingsButtonIcon {

					transform: rotateY(0deg);

				}

				#{$self}__menuClientZoneDropdown {

					&.show.show.show {
						width: $snet-frame-menu-open-width;
					}

				}

				#{$self}__menuClientZoneDropdownTrigger {

					&::before {

						content: $icon-chevrondown;
						display: flex;

					}

				}

			}

		}

		&.-menuHiddenDesktop.-hasMenuOpen {

			@include media-breakpoint-up(lg) {
				#{$self}__fader {

					opacity: 1;
					visibility: visible;
					z-index: z("sticky");

					@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {
						opacity: 0;
						visibility: hidden;

					}

				}

				#{$self}__menu {

					width: $snet-frame-menu-open-width;

				}

				#{$self}__menuItemText,
				#{$self}__submenuItemText,
				#{$self}__settingsCallText {

					opacity: 1;
					transition: opacity 0.1s 0.1s linear,
					flex-shrink 0s $snet-frame-menu-transition-timing linear // necessary for alignment on menu hide/show
				;
					flex-shrink: 1;

				}

				#{$self}__settingsCall {

					width: auto;

				}

				#{$self}__settingsButtonIcon {

					transform: rotateY(180deg);

				}

				#{$self}__menuClientZoneDropdownTrigger {

					&::before {

						display: none;

					}

				}
			}

			#{$self}__menuContainer {

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

					width: $snet-frame-menu-open-width;

				}

			}

			#{$self}__inner {

				@media screen and (min-width: map-get($tweakpoint-map, "tablet")) {

					padding-left: $snet-frame-menu-open-width;

				}

			}

		}

	}

	/* random parent element */
	/*
	*
	*   Syntax : .randomParentElt & {}
	*
	*/

	.bfm-theme & {

		#{$self}__menuLinkBubble {

			@include custom-prop-fallback("background-color", "sys-color-background-primary-100");

		}

	}

	.modal-open & {

		#{$self}__main {

			overflow: visible;
			position: static;
			z-index: auto;

		}

	}

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}