/* variables specific to current element */

$snet-guide-device-img-max-height: 60vh;
$snet-guide-device-desktop-header-desktop-height: map-deep-get($token-sizes-unit-map, "40");
$snet-guide-device-desktop-header-mobile-height: $snet-guide-device-desktop-header-desktop-height * 0.5;
$snet-guide-device-border-width: $device-border-width-global;

.#{$namespace}snetGuide {

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

	$self: &;

	/* properties of current element  + media queries */

	overflow: hidden;
	position: relative;
	z-index: z("zero");

	@include media-breakpoint-up(xl) {
		overflow: visible;
	}

	/* 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 */

	&__navigation {

		@include spacer-component-inline("md");
		margin-bottom: map-deep-get($token-spacer-stack-min-map, "3xl");

		@include media-breakpoint-up(xl) {

			@include spacer-component-inline("xl");
			margin-bottom: 0;

		}

	}

	// snetGuide__tab
	&__tab {

		// follows same logic as parent

		justify-content: flex-end;
		position: relative;

		&.-mobile {

			@include media-breakpoint-up(xl){
				width: max-content;
				margin: auto;
			}
			
			#{$self}__slider {

				right: 100%;

			}
			
		}

	}

	&__tabContent {

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

		@include media-breakpoint-up(xl){

			margin-bottom: map-deep-get($token-spacer-stack-max-map, "xl");

		}


	}
	
	&__tabDevice {

		height: 400px;
		overflow: hidden;

		&.-mobile {

			display: flex;
			justify-content: center;
			margin-left: -($grid-gutter-width*0.5);
			margin-right: -($grid-gutter-width*0.5);
			padding-left: $grid-gutter-width*0.5;
			padding-right: $grid-gutter-width*0.5;

			@include media-breakpoint-up(xl){
				margin-left: 0;
				margin-right: 0;
				padding-left: 0;
				padding-right: 0;
			}

			IMG {

				@include media-breakpoint-up(xl) {

					max-height: calc(#{$snet-guide-device-img-max-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom

				}

			}

		}

		&.-desktop {

			display: flex;
			align-items: flex-end;
			width: 500px;
			margin: auto;

			@include media-breakpoint-up(xl) {
				width: auto;
				max-width: 100%;
			}

			IMG {

				max-height: calc(#{$snet-guide-device-img-max-height} - #{$snet-guide-device-desktop-header-mobile-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom

				@include media-breakpoint-up("md") {

					max-height: calc(#{$snet-guide-device-img-max-height} - #{$snet-guide-device-desktop-header-desktop-height} - (#{$snet-guide-device-border-width*2})); // multiply by to because of border top and bottom

				}

			}

		}

		@include media-breakpoint-up(xl) {

			height: calc(#{$snet-guide-device-img-max-height});
			overflow: visible;
			display: flex;
			align-items: flex-end;

			> * {

				max-height: 100%;
				margin-left: auto;
				margin-right: auto;

			}

		}

	}

	&__tabDeviceInner {

		display: flex;
		justify-content: center;
		max-width: 100%;
		position: relative;
		transition: top 0.15s ease-in-out;

	}

	&__device {

		$device: &;

		width: max-content;

		&.-mobile {

			max-width: 328px;

		}

		&.-desktop {

			#{$device}Header {

				border-top-left-radius: map-deep-get($token-radius-map, "16");
				border-top-right-radius: map-deep-get($token-radius-map, "16");
				@include custom-prop-fallback("background-color", "sys-color-background-neutral-black");
				height: $snet-guide-device-desktop-header-mobile-height;
				display: flex;
				align-items: center;
				@include spacer-component-inline("sm");
				padding-left: map-deep-get($token-spacer-inset-map, "md");

				@include media-breakpoint-up("md") {

					height: $snet-guide-device-desktop-header-desktop-height;
					border-top-left-radius: map-deep-get($token-radius-map, "24");
					border-top-right-radius: map-deep-get($token-radius-map, "24");

				}

				+ #{$device}Img {

					border-top-left-radius: 0;
					border-top-right-radius: 0;
					border-top-width: 0;

				}

				SPAN {

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

					@include media-breakpoint-up("md") {

						width: map-deep-get($token-sizes-unit-map, "16")*0.75;
						height: map-deep-get($token-sizes-unit-map, "16")*0.75;

					}

				}

			}

			#{$device}Img {

				border-radius: map-deep-get($token-radius-map, "16");

				@include media-breakpoint-up("md") {

					border-radius: map-deep-get($token-radius-map, "24");

				}

			}

		}

		@include media-breakpoint-up(xl) {

			display: inline-flex;
			flex-direction: column;

		}

	}

	&__deviceImg {

		position: relative;
		overflow: hidden;
		border: $border-width*4 solid;
		@include custom-prop-fallback("border-color", "sys-color-background-neutral-black");
		border-radius: map-deep-get($token-radius-map, "32");

	}

	&__slider {

		display: flex;
		align-items: flex-start;
		margin-top: -$popover-body-padding-y;
		padding-left: $grid-gutter-width*0.5;
		padding-right: $grid-gutter-width*0.5;
		min-height: 156px;

		@include media-breakpoint-up(xl) {

			position: absolute;
			top: 0;
			bottom: 0;
			margin-top: 0;
			min-height: 0;

		}

		> * {

			min-width: 0;
			width: 320px;
			max-width: 100%;

			@include media-breakpoint-up(xl) {
				position: absolute !important;
				max-width: none;
			}

		}

	}	
	
	&__popover {

		display: none;


		@include media-breakpoint-between(xs,lg){
			transform: none !important;
			position: static !important;
			margin-left: auto !important;
			margin-right: auto !important;
		}

		@include media-breakpoint-up(xl){
			display: block;
			visibility: hidden;
		}

		&.show {

			display: block;

			@include media-breakpoint-up(xl){

				visibility: visible;

			}

		}

		.arrow {

			margin: 0;
			display: none;

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

		}
		
	}

	&__indicator {

		width: map-deep-get($token-sizes-unit-map, "12");
		height: map-deep-get($token-sizes-unit-map, "12");
		border-radius: map-deep-get($token-radius-map, "circle");
		@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
		position: absolute;
		z-index: z("low");
		transition: top 0.5s linear, left 0.5s linear;

		@at-root {
				
			@keyframes ripple {

				0%{transform: translate(-50%,-50%) scale(.1);opacity: 0;}
				50%{ opacity: 0.2;}
				100%{transform: translate(-50%,-50%) scale(1); opacity: 0;}
				
			}	
				
		}

		&::before,
		&::after {
			content: "";
			opacity: 0.2;
			background-color: inherit;
			border-radius: inherit;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
			width: map-deep-get($token-sizes-unit-map, "48");
			height: map-deep-get($token-sizes-unit-map, "48");

		}

		&::before {
			z-index: z("medium");
			animation: ripple 2s infinite 0.3s;
		}

		&::after {
			z-index: z("high");
			animation: ripple 2s infinite 0.6s;
		}

	}

	&__indicator SPAN {

		width: map-deep-get($token-sizes-unit-map, "48");
		height: map-deep-get($token-sizes-unit-map, "48");
		border-radius: inherit;
		background-color: inherit;
		opacity: 0.2;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		z-index: z("low");
		animation: ripple 2s infinite;

	}
		
	/* modifiers */

	// snetGuide -altStyle
	&.-altStyle {

		// follows same logic as base element

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}