/* variables specific to current element */

$panel-header-padding-bottom: map-deep-get($token-spacer-inset-map, "sm");

.#{$namespace}panelHeader {

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

	$self: &;

	/* properties of current element  + media queries */

	min-height: map-deep-get($token-sizes-component-map, "panel-header-height");
	display: flex;
	align-items: flex-start;
	flex-wrap: wrap;
	@include spacer-component-inline("xl");
	padding-top: map-deep-get($token-spacer-inset-map, "md");
	padding-bottom: $panel-header-padding-bottom;

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

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

	&__container {

		margin: 0 auto !important;
		display: flex;
		align-items: flex-start;
		flex-wrap: wrap;
	}

	// panelHeader__back
	&__back {

		// follows same logic as parent

		margin-right: map-deep-get($token-spacer-unit-map, "32");
		flex-grow: 0;

	}

	&__alignEnd {

		@include spacer-component-inline("xl");
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		margin-bottom: map-deep-get($token-spacer-stack-max-map, "sm");

		order: -1;
		width: 100%;

		@include media-breakpoint-up(lg){
			order: 1;
			width: auto;
			margin-bottom: 0;
		}

	}

	&__actionGroup {

		@include spacer-component-inline("sm");
		display: flex;
		align-items: center;
		min-height: 40px;

		&.-alignEnd {

			margin-left: auto;

		}

		&.-big {

			margin-top: -(map-deep-get($token-spacer-unit-map, "12"));

		}

		&.-medium {

			margin-top: -(map-deep-get($token-spacer-unit-map, "8"));

		}

		&.-timelineStart {

			position: relative;
			z-index: z("low");
			margin-left: map-deep-get($token-spacer-unit-map, "64");
			align-self: stretch;
			align-items: flex-start;

			&::before {

				content: "";
				position: absolute;
				z-index: z("negative");
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
				bottom: -($panel-header-padding-bottom);
				width: 2px;
				background-color: map-deep-get($token-color-brand-map, "secondary", "30");

			}

		}
		
	}

	.sds-searchGrowing {


	}

	//&__dropdownMenuFilters {
	//
	//	top: map-deep-get($token-spacer-unit-map, "8") !important;
	//	left: -(map-deep-get($token-spacer-unit-map, "24")) !important;
	//
	//}


	/* modifiers */

	// panelHeader -altStyle

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}