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

$grid-column-junction: $grid-columns*(math.div(2,3));
$grid-column-start: math.div($grid-columns,$grid-columns);
$grid-column-end: $grid-columns + 1;
$list-contextual-page-block-height: 304px;

.#{$namespace}highlightedArticleList {

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

	$self: &;

	/* properties of current element  + media queries */


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

	&__row {

		padding-top: map-deep-get($token-spacer-inset-map, "md");
		margin-top: -(map-deep-get($token-spacer-inset-map, "md"));
		overflow-x: auto;

		&.-gap {

			padding-bottom: map-deep-get($token-spacer-inset-map, "md");
			margin-bottom: -(map-deep-get($token-spacer-inset-map, "md")) !important;

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

		}

		@supports (scroll-snap-type: x mandatory) {
			scroll-snap-type: x mandatory;
		}

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

			padding-top: 0;
			margin-top: 0;
			overflow-x: visible;
			scroll-snap-type: none;
			display: grid;
			grid-template-columns: repeat(#{$grid-columns}, 1fr);
			min-height: ($list-contextual-page-block-height*2) + map-deep-get($token-spacer-grid-map, "gutter");
			height: calc(100vh - (($nav-topbar-height-global + $nav-sub-nav-height-mobile-global)*3) - (map-deep-get($token-spacer-content-section-map, "s")));

		}

	}

	// highlightedArticleList__item
	&__item {

		// follows same logic as parent

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

		> * {

			border-radius: inherit;
			box-shadow: map-deep-get($token-shadow-map, "active");
			min-width: 0;

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

		}

		&:not(:first-of-type) {

			> *  {

				@include media-breakpoint-up("lg") {
					min-height: $list-contextual-page-block-height;
				}

			}

		}

		@supports (scroll-snap-type: x mandatory) {
			scroll-snap-align: start;
		}

		flex-basis: calc(90vw - #{map-deep-get($token-spacer-grid-map, "gutter")});
		flex-shrink: 0;

		@include media-breakpoint-up("sm") {
			flex-basis: 375px;
		}

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

			width: auto;
			grid-column-start: $grid-column-start;
			grid-column-end: $grid-column-junction;
			grid-row: 1 / 3;

		}

		& ~ & {

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

				grid-column-start: $grid-column-junction;
				grid-column-end: $grid-column-end;
				grid-row: 1 / 2;
				border-top-left-radius: 0;
				border-bottom-left-radius: 0;

			}

		}
		

		&:first-of-type:not(:last-of-type) {

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

				border-top-right-radius: 0;
				border-bottom-right-radius: 0;

			}

		}
		
		&:last-of-type {

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

				grid-row: 2 / 3;

			}


		}

		&:only-of-type {
			
			@include media-breakpoint-up("lg") {

				grid-column-start: $grid-column-start;
				grid-column-end: $grid-column-end;

			}

			[data-shape-bridge] {

				left: 55%;

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

					top: -15%;
					left: 60%;

				}

			}

		}
		
		&:nth-of-type(2):not(:last-of-type) {

			@include media-breakpoint-up("lg") {
				border-bottom-right-radius: 0;
			}

		}

		&:last-of-type:not(:nth-of-type(2)):not(:only-of-type) {

			@include media-breakpoint-up("lg") {
				border-top-right-radius: 0;
			}

		}

		&:nth-last-child(-n+2):first-child,
		&:nth-last-child(-n+2):first-child ~ & {

			&:last-of-type {

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

					grid-row: 1 / 3;

				}

			}

		}

	}


	/* modifiers */

	// highlightedArticleList -altStyle
	&.-altStyle {

		// follows same logic as base element

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}