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

$sitfin-block-header-padding: map-deep-get($token-spacer-inline-map, "md");
$sitfin-collapse-inner-padding: map-deep-get($token-spacer-inline-map, "md");
$sitfin-row-padding-left: map-deep-get($token-sizes-unit-map, "56");
$sitfin-row-margin-top: map-deep-get($token-spacer-stack-max-map, "md");
$sitfin-row-card-horizontal-spacing: map-deep-get($token-spacer-inline-map, "md");
$sitfin-row-left-offset: (math.div(map-deep-get($token-icon-btn-size-map, "smaller", "width"), 2));
$sitfin-block-avatar-margin-right: map-deep-get($token-spacer-inline-map, "lg");
$sitfin-btn-row-margin-top: map-deep-get($token-spacer-stack-max-map, "lg");

.#{$namespace}sitfinBlock {

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

	$self: &;

	/* properties of current element  + media queries */

	background-color: map-deep-get($token-color-grayscale-map, "0");
	border-radius: map-deep-get($token-radius-map, "16");


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

	// sitfinBlock__header
	&__header {

		// follows same logic as parent

		display: flex;
		align-items: center;
		//justify-content: space-between;
		@include spacer-component-inline("md");
		padding: $sitfin-block-header-padding;
		position: relative;
		z-index: z("zero");

	}

	&__heading {

		flex-shrink: 0;
		@include make-col(4);

	}

	&__meta {

		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
		margin-right: auto;

	}

	&__collapseTrigger {

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

		&::before {

			content: "";
			position: absolute;
			z-index: z("negative");
			top: 50%;
			bottom: 0;
			left: $sitfin-row-left-offset*2;
			transform: translateX(-50%) scaleY(0);
			width: $border-width*2;
			background-color: $border-color;
			transition: transform 0.05s linear;
			transition-delay: $transition-collapse-duration;
			transform-origin: top;

		}

		&[aria-expanded="true"] {

			&::before {

				transition-delay: 0s;
				transform: translateX(-50%) scaleY(1);

			}

			[class*="icon"] {

				&::before {

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

				}

			}

		}

	}

	&__row,
	&__rowInner {
		display: flex;
	}

	&__row,
	&__btnRow {
		padding-left: $sitfin-row-padding-left;
	}

	&__row {
		
		& + & {

			margin-top: $sitfin-row-margin-top;

		}

		& + #{$self}__btnRow {

			margin-top: $sitfin-btn-row-margin-top;

		}

		&:first-of-type {

			#{$self}__rowAvatar::before {

				top: -($sitfin-block-header-padding);

			}

		}

		&:last-of-type {

			#{$self}__rowAvatar::before {

				top: -($sitfin-block-header-padding);
				bottom: 50%;

			}

			#{$self}__rowAvatar::after {

				content: none;

			}

		}

		#{$self}__rowInner > #{$self}__rowItem:only-of-type,
		#{$self}__rowInner > #{$self}__card:only-of-type {

			[class*="dotAfter"] {
				display: none;
			}

		}

	}

	&__btnRow#{$self}__btnRow {

		position: relative;

		&::before,
		&::after {
			content: "";
			position: absolute;
			left: $sitfin-row-left-offset;
		}

		&::before {

			background-color: $border-color;
			top: -($sitfin-btn-row-margin-top);
			bottom: 50%;
			width: $border-width*2;
			transform: translateX(-50%);

		}

		&::after {

			background-color: $border-color;
			top: 50%;
			width: ($sitfin-row-padding-left - $sitfin-row-left-offset);
			height: $border-width*2;
			transform: translateY(-50%);
		}

	}

	&__rowInner {

		display: inline-flex;
		align-items: stretch;
		position: relative;
		width: 100%;

		&::before {

			content: "";
			background-color: $border-color;
			position: absolute;
			top: 50%;
			right: 100%;
			transform: translateY(-50%);
			width: ($sitfin-row-padding-left - $sitfin-row-left-offset);
			height: $border-width*2;

		}

		#{$self}__rowItem,
		#{$self}__card {
			[class*="dot"] {
				display: block;
			}
		}

	}

	&__rowMoreCards {

		position: relative;
		display: flex;
		align-items: center;
		margin-left: $sitfin-row-card-horizontal-spacing;
		@include spacer-component-inline("md");

		#{$self}__rowItem {
			display: flex;
		}

		#{$self}__rowItem,
		#{$self}__card {

			align-items: center;

			&::before {

				content: "";
				position: absolute;
				z-index: z("zero");
				top: 50%;
				right: 100%;
				left: auto;
				transform: translate(0, -50%);
				width: $sitfin-row-card-horizontal-spacing;
				height: $border-width*2;
				background-color: $border-color;

			}

			&:last-of-type {

				//background-color: red;

				[class*="dotAfter"] {
					display: none;
				}

			}

		}

		&.-stacked {

			flex-grow: 1;
			align-items: stretch;

			&::after {

				content: "";
				pointer-events: none;
				position: absolute;
				top: -(math.div($sitfin-collapse-inner-padding, 2));
				bottom:-(math.div($sitfin-collapse-inner-padding, 2));
				right: -($sitfin-collapse-inner-padding);
				width: 5rem;
				@include gradient-directional(rgba(map-deep-get($token-color-grayscale-map, "0",),0.05), map-deep-get($token-color-grayscale-map, "0",), 0%, 30%, 90deg, true);
				background-color: transparent;

			}

			//#{$self}__rowItem,
			#{$self}__card {

				position: absolute;
				left: 0;
				height: 100%;
				transition: transform 0.15s linear;

				&.-isSelected {
					transform: translateX(0);
				}

				&.-stacked1 {
					
					&::before {

						right: 100%;
						left: auto;
						width: $sitfin-row-card-horizontal-spacing;
						height: $border-width*2;
						transform: translate(0, -50%);

					}
					
				}
				
				&.-stacked2,
				&.-stacked3 {

					&::before,
					&::after {

						content: none;

					}

					[class*="dot"] {
						display: none;
					}

				}

				&.-stacked1 {

					transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing}));

				}

				&.-stacked2 {

					transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing*3}));

				}

				&.-stacked3 {

					transform: translateX(calc(100% + #{$sitfin-row-card-horizontal-spacing*5}));

				}


			}

		}

	}

	&__seeMore {

		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);

	}
	
	&__rowAvatar {

		display: flex;
		align-items: center;
		position: relative;
		z-index: z("low");
		margin-left: -($sitfin-row-padding-left);
		margin-right: $sitfin-block-avatar-margin-right;

		&::before,
		&::after {
			content: "";
			background-color: $border-color;
			position: absolute;
			z-index: z("negative");
			left: $sitfin-row-left-offset;
			width: $border-width*2;
			transform: translateX(-50%);
		}

		&::before {
			top: -($sitfin-row-margin-top);
			bottom: 50%;
		}

		&::after {

			top: 50%;
			bottom: 0;

		}
		
	}
	
	&__collapseInner {

		padding: $sitfin-block-header-padding $sitfin-collapse-inner-padding $sitfin-collapse-inner-padding;

	}

	&__overlapAvatars {

		display: inline-flex;
		flex-wrap: nowrap;
		margin-left: map-deep-get($token-spacer-inline-map, "xl");
		position: relative;
		z-index: z("zero");
		transform-style: preserve-3d; /*  parent styles for overlapping elements */


		> * {

			position: relative;
			margin-right: -(map-deep-get($token-spacer-inline-map, "md"));
			transition: transform 0.15s linear;
			box-shadow: map-deep-get($token-shadow-map, "active");
			transform: rotateY(-1deg) skewY(1deg);

			& ~ * {

				/* style for overlapping "next" sibling elements lower than previous */
				z-index: z("negative");

			}

			&:hover {

				z-index: z("low");
				transform: translateZ(1px) scale(1.1) rotateY(-1deg) skewY(1deg);

			}

		}

		&.-borderItems {

			> * {

				background-color: map-deep-get($token-color-grayscale-map, "0");
				border: $border-width solid $border-color;

			}

		}

	}

	&__rowItem {
		position: relative;



	}

	&__rowItemDot {

		position: absolute;
		top: 50%;
		z-index: z("low");

		&.-dotBefore {

			right: 100%;
			transform: translate(100%,-50%);

		}

		&.-dotAfter {

			left: 100%;
			transform: translate(-100%,-50%);

		}

	}


	/* modifiers */

	// sitfinBlock -hasAction
	&.-hasAction {

		// follows same logic as base element


		#{$self}__row:nth-last-of-type(2) {

			#{$self}__rowAvatar::after {

				border-left: $border-width*2 dashed $border-color;
				background-color: transparent;

			}

		}

		#{$self}__btnRow {

			&::before,
			&::after {
				content: "";
				background-color: transparent;
			}

			&::before {
				border-left: $border-width*2 dashed $border-color;
			}

			&::after {
				border-top: $border-width*2 dashed $border-color;
			}

		}

	}

	&.-noAccount {

		#{$self}__collapseTrigger {

			&::before {

				border-left: $border-width*2 dashed $border-color;
				background-color: transparent;

			}

		}

		#{$self}__btnRow#{$self}__btnRow {

			&::before {

				top: -(math.div($sitfin-btn-row-margin-top, 2));

			}

		}


	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}