/* variables specific to current element */

$service-point-list-map-list-item-inset-spacing-mobile: map-deep-get($token-spacer-inset-map, "sm");
$service-point-list-map-list-item-inset-spacing-desktop: map-deep-get($token-spacer-inset-map, "md");
$service-point-list-map-list-pane-inset-spacing-mobile: map-deep-get($token-spacer-inset-map, "md");
$service-point-list-map-list-pane-inset-spacing-desktop: map-deep-get($token-spacer-inset-map, "lg");
$service-point-root-height: calc(100vh - #{$nav-topbar-height-global});

.#{$namespace}servicePointListMap {

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

	$self: &;

	/* properties of current element  + media queries */

	min-height: $service-point-root-height;

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

	&__infoPane {


	}

	&__infoWrapper {

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

	}

	&__mapPane {

		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");
		position: absolute;
		z-index: z("low");
		top: 0;
		right: map-deep-get($token-spacer-grid-map, "xs");
		bottom: 0;
		left: map-deep-get($token-spacer-grid-map, "xs");
		display: none;

		#{$self}__searchHeader {

			padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;

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

		}

		@include media-breakpoint-up("md") {
			right: map-deep-get($token-spacer-grid-map, "gutter");
			left: map-deep-get($token-spacer-grid-map, "gutter");
		}

		@include media-breakpoint-up("lg") {
			z-index: z("zero");
			right: 0;
			left: 0;
			height: calc(100vh - #{$nav-topbar-height-global});
			top: auto;
		}

	}

		&__mapInner {

			z-index: z("negative"); /* position relative is already on the embed-repsonsive class */
			margin-top: -($btn-min-height-global + $service-point-list-map-list-item-inset-spacing-desktop);
			margin-right: -(map-deep-get($token-spacer-grid-map, "xs"));
			margin-left: -(map-deep-get($token-spacer-grid-map, "xs"));
			width: auto;

			@include media-breakpoint-up("md"){
				margin-right: 0 (-(map-deep-get($token-spacer-grid-map, "gutter")));
				margin-left: 0 (-(map-deep-get($token-spacer-grid-map, "gutter")));
			}

			@include media-breakpoint-up("lg"){
				margin-top: 0;
				margin-right: 0;
				margin-left: 0;
				width: 100%;
			}

		}

	&__infoPane,
	&__listPane,
	&__detailPane {

		@include custom-prop-fallback("background-color","sys-color-elevation-surface-flat");

	}

	&__listPane,
	&__detailPane {

		padding: $service-point-list-map-list-pane-inset-spacing-mobile 0;

		@include media-breakpoint-up("lg") {
			padding: $service-point-list-map-list-pane-inset-spacing-desktop 0;
		}

	}
	
	&__filterBar {

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

	}
	
	&__listPane {

		position: relative;
		z-index: z("zero");
		padding: 0 0 $service-point-list-map-list-pane-inset-spacing-mobile 0;

		@include media-breakpoint-up("lg") {
			padding: 0;
		}
	}

		&__searchHeader {

			padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;
			padding-bottom: $service-point-list-map-list-pane-inset-spacing-desktop;
			position: sticky;
			top: 0;
			z-index: z("medium");

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

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

			}

		}

		&__listItemWrapper {

			* + &:nth-of-type(2) {

				margin-top: map-deep-get($token-spacer-stack-min-map, "md");

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

					margin-top: 0;

				}

			}

		@include outOfBoundsInline("sm");

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

			@include unsetOutofBoundsInline();

		}

	}

	// servicePointListMap__listItem
	&__listItem {

		// follows same logic as parent

		position: relative;
		z-index: z("zero");
		display: flex;
		align-items: stretch;
		@include spacer-component-inline("md");
		border-radius: map-deep-get($token-radius-map, "16");
		padding: $service-point-list-map-list-item-inset-spacing-mobile;
		@include custom-prop-fallback("background-color", "comp-card-background-color");

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

			padding: $service-point-list-map-list-item-inset-spacing-desktop;
			@include spacer-component-inline("lg");

		}

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

				@include custom-prop-fallback("background-color", "comp-card-sunken-background-color");

			}
		}

		&.-loading {

			pointer-events: none;
			cursor: default;

			&:hover {

				@media (hover: hover) {

					background-color: transparent;

				}

			}

		}

	}
	
	&__listItemImg {

		position: relative;
		aspect-ratio: 1/1;
		width: map-deep-get($token-sizes-unit-map, "88");
		flex-shrink: 0;
		align-self: flex-start;
		border-radius: map-deep-get($token-radius-map, "24");

		@include media-breakpoint-up("lg") {
			width: 144px;
		}

		IMG {

			width: 100%;
			height: 100%;
			object-fit: cover;
			border-radius: inherit;

		}

	}
	
	&__listItemBadge {

		align-self: flex-start;

		@include media-breakpoint-up("lg"){
			position: absolute;
			top: $service-point-list-map-list-item-inset-spacing-desktop;
			right: $service-point-list-map-list-item-inset-spacing-desktop;
		}

	}

	&__listDetailTrigger {



	}

	&__actionsList {

		overflow-x: auto;
		padding: map-deep-get($token-spacer-inset-map, "md");
		margin-left: -(map-deep-get($token-spacer-grid-map, "xs"));
		margin-right: -(map-deep-get($token-spacer-grid-map, "xs"));
		margin-bottom: -(map-deep-get($token-spacer-grid-map, "xs"));

		@include media-breakpoint-up("lg") {
			padding-top: map-deep-get($token-spacer-inset-map, "lg");
		}

	}

	&__detailPane {

		width: 100%;
		display: none;

		&.show {

			display: block;

		}

	}

	&__listPaneFooter,
	&__mapFooter {

		padding: map-deep-get($token-spacer-inset-map, "lg");
		z-index: z("low");

	}

	&__listPaneFooter {

		position: sticky;
		z-index: z("sticky");
		bottom: 0;
		text-align: center;
		margin-top: auto;

	}

	&__mapFooter {

		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;

	}
	
	&__detailImg {

		position: relative;
		margin-top: -(#{map-deep-get($token-button-size-big-map, "mobile", "min-height") + map-deep-get($token-spacer-stack-max-map, "md")});

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

		IMG {

			aspect-ratio: 16/9;
			object-fit: cover;
			width: 100%;
			height: 100%;
			border-radius: inherit;

		}

	}

	&__detailBack {

		margin-top: map-deep-get($token-spacer-stack-max-map, "md");
		margin-left: map-deep-get($token-spacer-stack-max-map, "sm");
		top: map-deep-get($token-spacer-stack-max-map, "sm") + $nav-topbar-height-global;
		z-index: z("sticky");

		@include media-breakpoint-up("lg") {
			top: map-deep-get($token-spacer-stack-max-map, "md") + $nav-topbar-height-global;
		}

	}

	&__detailMainInfo {

		padding-left: $grid-gutter-width-xs * 0.5;

	}

	&__detailTimetableItem {

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

		&.-active {

			font-weight: map-deep-get($token-font-weight-map, "semi-bold");
			@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");

		}

	}

	&__search {

		[data-toggle-visibility-at="lg"] {

			display: none;

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

				display: flex;

			}

		}

	}

	&__widgetZone {

		margin-top: map-deep-get($token-spacer-unit-map, "72") + map-deep-get($token-spacer-unit-map, "72");
		padding-top: $service-point-list-map-list-pane-inset-spacing-mobile;
		pointer-events: auto;

	}

	&__widgetZoneInner {

		border-radius: $box-border-radius-global;

	}


	[data-hide-map] {
		display: none;
	}

	[data-show-map] {
		display: inline-flex;
	}

	/* modifiers */

	// servicePointListMap -altStyle
	&.-detailOpen {

		// follows same logic as base element

		#{$self}__listPane {

			//overflow: hidden;
			opacity: 0;
			visibility: hidden;

		}

		#{$self}__detailPane {

			//overflow: visible;
			opacity: 1;
			visibility: visible;

		}

	}

	&.-mapShown {

		position: relative;
		height: $service-point-root-height;

		[data-has-shadow-on-map-shown] {

			&::before {

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

			}

		}

		[data-hide-map] {
			display: inline-flex;
		}

		[data-show-map] {
			display: none;
		}

		@include media-breakpoint-up("lg") {
			position: static;
		}

		#{$self}__infoPane,
		#{$self}__infoWrapper, 
		#{$self}__listPane,
		#{$self}__outerContainer,
		#{$self}__outerRow {
			height: 100%;
		}

		#{$self}__infoWrapper {

			display: none;

			@include media-breakpoint-up("lg") {
				display: block;
				pointer-events: none;
				background-color: transparent;
			}

		}
		
		#{$self}__searchHeader {

			pointer-events: auto;
			background-color: transparent;

		}

		#{$self}__listPaneFooter {
			pointer-events: auto;
		}

		#{$self}__listPane {

			display: flex;
			flex-direction: column;
			background-color: transparent;

		}

		#{$self}__listPaneContent {

			display: none;

		}

		#{$self}__mapPane {

			display: flex;
			flex-direction: column;

			[data-hide-map] {

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

			}

		}

	}

	&.-detailShown {

		min-height: 0;

	}

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

	.#{$namespace}pageLayout:has([data-nav-module]) & {

		#{$self}__searchHeader {

			top: $nav-topbar-height-global;

		}

	}

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}