/* variables specific to current element */

$contextual-list-collapse-inner-padding: map-deep-get($token-spacer-inset-map, "md");
$contextual-list-collapse-inner-padding-lg: map-deep-get($token-spacer-inset-map, "lg");
$contextual-list-action-margin: map-deep-get($token-spacer-inline-map, "sm");
$contextual-list-action-margin-lg: map-deep-get($token-spacer-inline-map, "md");

.#{$namespace}contextualList {

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

	&__item {
		
		& + & {

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

		}
		
	}
	
	// contextualList__action
	&__action {

		// follows same logic as parent

		@include custom-prop-fallback("background-color", "comp-accordion-background-color");
		display: flex;
		align-items: center;
		padding: map-deep-get($token-spacer-inset-map, "md");
		border-radius: map-deep-get($token-radius-map, "16");
		width: 100%; // for button dimensions
		text-align: left; // for button text alignment
		transition: background-color 0.15s linear, border-radius 0.15s linear, box-shadow 0.15s linear;

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

		&[aria-expanded="true"] {

			position: relative;
			z-index: z("low");
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			@include custom-prop-fallback("background-color", "comp-accordion-active-background-color");
			box-shadow: 0 (-(map-deep-get($token-sizes-unit-map, "16") - map-deep-get($token-sizes-unit-map, "4"))) map-deep-get($token-sizes-unit-map, "16") 0 rgba(map-deep-get($token-color-brand-map, "secondary", "100"),0.1);

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

					@include custom-prop-fallback("background-color", "comp-accordion-active-background-color");

					#{$self}__actionIcon {

						@include custom-prop-fallback("background-color", "comp-button-secondary-hovered-background-color");

					}

				}

			}

		}

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

				@include custom-prop-fallback("background-color", "comp-accordion-hovered-background-color");

			}
		}

	}

	// contextualList__actionIcon
	&__actionIcon {

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

		[aria-expanded="true"] & {

			@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");

			[class*="icon"]::before {

				content: map-deep-get($token-icon-map, "minus")

			}

		}

		@include media-breakpoint-up(lg) {
			margin-right: map-deep-get($token-spacer-inline-map, "md");
		}

	}

	&__actionText {

		@extend %headingBase;
		@extend %h4;
		@include custom-prop-fallback("color", "comp-accordion-text-color","true","true");

	}

	&__collapse {

		position: relative;
		box-shadow: map-deep-get($token-shadow-map, "detail");
		transition: $transition-collapse, box-shadow 0.15s linear;
		border-bottom-left-radius: map-deep-get($token-radius-map, "16");
		border-bottom-right-radius: map-deep-get($token-radius-map, "16");
		@include custom-prop-fallback("background-color", "comp-accordion-active-background-color");

		&.show {

			#{$self}__collapseInner {

				&::before {

					opacity: 1;
					transition: opacity 0.15s linear;
				}

			}

		}
		
	}

	&__collapseInner {

		position: relative;
		padding: $contextual-list-collapse-inner-padding;
		border-radius: inherit;

		@include media-breakpoint-up(lg){

			padding: $contextual-list-collapse-inner-padding-lg;
			padding-left: $contextual-list-collapse-inner-padding-lg + map-deep-get($token-icon-btn-size-map, "smaller", "width") + $contextual-list-action-margin-lg;

		}

		&::before {

			content: "";
			position: absolute;
			opacity: 0;
			top: 0;
			left: $contextual-list-collapse-inner-padding;
			@extend %logoSeparator;

			transition-delay: 0s;
			transition-duration: 0s;
			@include media-breakpoint-up(lg) {
				left: $contextual-list-collapse-inner-padding-lg + map-deep-get($token-icon-btn-size-map, "smaller", "width") + $contextual-list-action-margin-lg;
			}

		}

	}


	/* modifiers */

	// contextualList -inverted
	&.-inverted {

		// follows same logic as base element

		#{$self}__action {

			@include custom-prop-fallback("background-color", "comp-accordion-active-background-color");

			&[aria-expanded="true"][aria-expanded="true"] {

				@include custom-prop-fallback("background-color", "comp-accordion-active-background-color");

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

						#{$self}__actionIcon {

							@include custom-prop-fallback("background-color", "comp-button-secondary-hovered-background-color");

						}

					}

				}

			}

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

					@include custom-prop-fallback("background-color", "comp-accordion-hovered-background-color");

					#{$self}__actionIcon {

						@include custom-prop-fallback("background-color", "comp-button-secondary-inverse-background-color");

					}

				}

			}

		}

		#{$self}__actionIcon {

			@include custom-prop-fallback("background-color", "comp-button-secondary-background-color");

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}