/* variables specific to current element */

$document-padding: map-deep-get($token-spacer-inline-map, "md");
$document-padding-desktop: map-deep-get($token-spacer-inline-map, "lg");

.#{$namespace}document {

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

	$self: &;

	/* properties of current element  + media queries */
	border-radius: map-deep-get($token-radius-map, "16");
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $document-padding;
	position: relative;
	z-index: z("zero");
	@include custom-prop-fallback-override("comp-heading-text-color", "comp-alert-banner-primary-heading-text-color");

	@include media-breakpoint-up(lg) {
		padding: $document-padding-desktop;
	}

	/* Pseudo Elements */

	//&::before,
	//&::after {
	//
	//	content: "";
	//	position: absolute;
	//	z-index: z("negative");
	//	top: 0;
	//	right: 0;
	//	bottom: 0;
	//	left: 0;
	//	border-radius: inherit;
	//	transition: opacity 0.15s linear;
	//
	//}

	&::before {

		//box-shadow: map-deep-get($token-shadow-map, "hover");
		//opacity: 0;

	}

	&::after {

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

	}

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

	// document__imgContainer
	&__imgContainer {

		border-radius: inherit;
		aspect-ratio: 7/5;

	}

	&__img {

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

	}
	
	&__noPic {

		height: 100%;

	}
	
	// document__meta
	&__meta {

		// follows same logic as parent

		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
		margin-right: map-deep-get($token-spacer-inline-map, "lg");

	}
	
	&__body {

		padding: $document-padding;

		@include media-breakpoint-up(lg) {
			padding: $document-padding-desktop;
		}

	}
	
	&__actionZone {

		margin-left: map-deep-get($token-spacer-inline-map, "lg");

	}


	/* modifiers */

	// document -inverted
	&.-inverted {

		// follows same logic as base element

		@include custom-prop-fallback("background-color", "comp-alert-banner-primary-background-color");
		transition: background-color 0.15s linear;

		&:hover,
		&:focus {
			@media (hover: hover) {
				@include custom-prop-fallback("background-color", "sys-color-background-primary-10");
			}
		}

	}
	
	&.-rowBig {

		padding: 0;
		flex-direction: column;
		justify-content: flex-start;

		@include media-breakpoint-up(md) {
			flex-direction: row;
			align-items: stretch;
		}

		#{$self}__imgContainer {

			margin-top: map-deep-get($token-spacer-stack-max-map, "md");
			flex-basis: 200px;
			width: 200px;
			height: 280px;

			@include media-breakpoint-up(md) {

				margin-top: 0;

			}

		}

		#{$self}__body {

			display: flex;
			flex-direction: column;
			flex-grow: 1;
			justify-content: space-between;
			width: 100%;
			
			@include media-breakpoint-up("lg") {
				width: auto;
			}

		}

		#{$self}__actionZone {

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

		}

	}

	&.-column {

		padding: 0;
		width: max-content;

		#{$self}__imgContainer {

			width: $document-column-width-mobile-global;
			height: $document-column-height-mobile-global;
			transition: transform $box-scale-shadow-speed-global linear;

			@include media-breakpoint-up(lg) {

				width: $document-column-width-desktop-global;
				height: $document-column-height-desktop-global;

			}

		}
		
		#{$self}__body {

			display: flex;
			flex-direction: column;
			flex-grow: 1;
			justify-content: space-between;
			align-items: flex-start;
			position: absolute;
			z-index: z("zero");
			border-radius: inherit;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			padding-top: $document-padding * 3;
			opacity: 0;
			transition: opacity $box-scale-shadow-speed-global linear;

			&::before {

				content: "";
				position: inherit;
				z-index: z("negative");
				border-radius: inherit;
				top: inherit;
				left: inherit;
				width: inherit;
				height: inherit;
				@include custom-prop-fallback("background-color", "comp-card-background-color");
				opacity: 0.9;
				backdrop-filter: blur(8px);
				transition: transform $box-scale-shadow-speed-global linear;

			}

			@include media-breakpoint-up(lg) {

				padding-top: $document-padding-desktop * 2.3333333;

			}

		}

		#{$self}__description {

			@extend %lineClampBase;
			@extend %textEllipsisLg;

		}
		
		#{$self}__actionZone {

			@include custom-prop-fallback("background-color", "comp-card-raised-background-color");
			border-radius: map-deep-get($token-radius-map, "32");
			box-shadow: map-deep-get($token-shadow-map, "active");
			padding: map-deep-get($token-spacer-inset-map, "sm");
			margin: 0 auto;
		}

		#{$self}__meta {

			position: absolute;
			top: $document-padding;
			left: $document-padding;

			@include media-breakpoint-up(lg) {
				top: $document-padding-desktop;
				left: $document-padding-desktop;
			}

		}

		&__action {

			transform: translateY(200%);
			opacity: 0;
			transition: opacity 0.15s 0.15s linear, transform 0.15s 0.3s linear;


		}

		&:hover {


			#{$self}__body {
				opacity: 1;
			}

			#{$self}__imgContainer,
			#{$self}__body::before {

				transform: scale($box-scale-shadow-scale-global);

			}

			#{$self}__action {

				transform: translateY(0);
				opacity: 1;

			}

		}

	}

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

	/* Pseudo Classes */

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

			&::before {
				opacity: 1;
			}

			&::after {
				opacity: 0;
			}

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}