@use "sass:math";
@use "sass:list";
/* variables specific to current element */

$img-aspect-ratio: list.slash(16,10);
$img-max-height:   625px;

.#{$namespace}leaseOffer {

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

	$self: &;

	/* properties of current element  + media queries */
	position: relative;
	z-index: z("zero");
	/* 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 */

	&__inner {
		height: 100%;
		@include spacer-component-stack("lg");
		display: flex;
		flex-direction: column;
	}

	&__brand {

		width: map-deep-get($token-sizes-unit-map, "32");
		height: map-deep-get($token-sizes-unit-map, "32");
		object-fit: contain;
		object-position: center;

	}

	&__miscInfo {

		display: flex;
		justify-content: space-between;
		gap: map-deep-get($token-spacer-grid-map, "xs")

	}

	&__img {

		aspect-ratio: $img-aspect-ratio;
		display: block;
		margin: auto;

	}

	&__configOptions {

		display: flex;
		align-items: center;
		@include spacer-component-inline("md")

	}

	&__configColors {

		display: flex;
		align-items: center;
		@include spacer-component-inline("xs");
	}

	&__priceArea {

		@include spacer-component-stack-exception("xl");
		padding-bottom: map-deep-get($token-spacer-inset-map, "md");

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

	}

	// leaseOffer__price
	&__priceMisc,
	&__price {

		// follows same logic as parent

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

	}
x
	&__price {

		margin-right: map-deep-get($token-spacer-inline-map, "md");

	}

	&__highlightMessage {

		@include spacer-component-stack-exception("xl");
		order: 10;

	}

	&__badgeContainer {

		justify-content: flex-end;
		margin-bottom: -(map-deep-get($token-spacer-stack-max-map, "xs")) !important;

		> * {

			padding-left: map-deep-get($token-spacer-inset-map, "xs") !important;
			padding-right: map-deep-get($token-spacer-inset-map, "xs") !important;
			margin-bottom: map-deep-get($token-spacer-stack-max-map, "xs") !important;

		}

	}

	&__action {

		height: 0;
		margin: 0 auto;
		
		@extend .stretched-link;
		
		&:focus {
			@media (hover: hover) {
				#{$self}__actionInner {

					opacity: 1;
					transform: translateY(-90px);

				}
			}
		}

	}

	&__actionInner {

		padding: map-deep-get($token-spacer-inline-map, "sm");
		box-shadow: map-deep-get($token-shadow-map, "active");
		background-color: rgba(map-deep-get($token-color-grayscale-map, "0"), 0.8);
		border-radius: map-deep-get($token-button-size-big-map, "desktop", "border-radius");
		opacity: 0;
		transform: translateY(-100%);
		transition: opacity 0.15s linear, transform 0.15s ease-out;
		position: relative;
		z-index: z("low");

	}

	&__miscInfo {
		order: 1;
	}

	&__header {
		order: 2;
	}

	&__optionsZone {
		order: 3;
	}

	&__priceArea {
		order: 5;
	}

	&__highlightMessage {
		order: 6;
	}

	&__action {
		order: 4;
	}

	/* modifiers */

	// leaseOffer -highlight
	&.-highlight {

		// follows same logic as base element

		position: relative;
		background-color: transparent;
		padding: 0;

		#{$self}__imgWrapperInner {
			position: relative;
			width: 100%;
		}

		#{$self}__plus {

			flex-shrink: 0;
			position: absolute;
			z-index: z("negative");
			bottom: 55%;
			right: 0;
			//transform: translate(0, -125%);
			overflow: hidden;
			width: map-deep-get($token-sizes-unit-map, "96");
			height: map-deep-get($token-sizes-unit-map, "96");
			padding-left: map-deep-get($token-spacer-inset-map, "lg");

			@media screen and (min-width: 400px) {

				overflow: visible;
				padding-left: 0;
				max-width: 200px;
				width: 25%;
				bottom: 65%;
				height: auto;

			}

			@include media-breakpoint-up("lg"){
				width: 40%;
				max-width: 314px;
				bottom: 58%;
				right: 0;
			}

			@include media-breakpoint-up("xl"){
				bottom: 65%;
			}

		}

		#{$self}__plusSvg {

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

			@media screen and (min-width: 400px) {

				max-width: 100%;
				width: auto;
				height: auto;

			}

		}

		#{$self}__plusSvgColor {

			@include custom-prop-fallback("fill", "sys-color-text-secondary-vivid",true,true);

		}

		@include media-breakpoint-up("md") {
			#{$self}__imgWrapper {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

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

			position: relative;
			@include make-row();
			align-items: center;
			justify-content: space-between;

			&::before {

				content: "";
				aspect-ratio: $img-aspect-ratio;
				max-height: $img-max-height;
				@include make-col-ready();
				width: auto;
				@include make-col(8);
				flex-shrink: 0;

			}

			#{$self}__inner {
				@include make-col-ready();
				@include make-col(4);
				position: static;
			}

			#{$self}__badgeContainer {

				position: absolute;
				z-index: z("low");
				top: 0;
				left: $grid-gutter-width*0.5;
				@include make-col((12-8));
				padding: 0;
				justify-content: flex-start;

			}

			#{$self}__imgWrapper {

				@include make-col-ready();
				@include make-col(8);
				position: absolute;
				aspect-ratio: $img-aspect-ratio;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 100%;
				max-height: $img-max-height;
				
			}

			#{$self}__img {

				transform: translateY(10%);
				max-height: 100%;

			}

			#{$self}__action {

				height: auto;
				opacity: 1;
				margin-left: 0;
				order: 5;
				@include spacer-component-stack-exception("md");

				&::after {
					//content: none;
				}

			}

			#{$self}__actionInner {

				opacity: 1;
				padding: 0;
				box-shadow: none;
				transform: none !important;

			}

		}

		&.-imageEnd {

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

				flex-direction: row-reverse;

				#{$self}__imgWrapper {

					left: auto;
					right: 0;

				}
				
				#{$self}__plus {

					left: 0;
					right: auto;

				}

				#{$self}__badgeContainer {

					left: auto;
					right: $grid-gutter-width*0.5;
					justify-content: flex-end;

				}

			}

		}

	}

	&.-plusSecondary {

		#{$self}__plusSvgColor {

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

		}

	}

	&.-custom {

		#{$self}__inner {

			justify-content: center;

		}

		#{$self}__optionsZone {

			order: 0

		}

	}

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

	/* Pseudo Classes */

	&:hover {
		@media (hover: hover) {
			#{$self}__actionInner {

				opacity: 1;
				transform: translateY(-175%);

			}
		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}