/* variables specific to current element */

$transaction-block-amount-price-col: $transaction-block-amount-price-col-global;
$transaction-block-account-info-col: $transaction-block-account-info-col-global;
$transaction-block-padding-mobile: $transaction-block-padding-mobile-global;
$transaction-block-padding-desktop: $transaction-block-padding-desktop-global;
$transaction-block-negative-margin: $transaction-block-negative-margin-global;
$transaction-block-row-padding: $transaction-block-row-padding-global;
$transaction-block-row-fixed-col-total-width: $transaction-block-row-fixed-col-total-width-global;
$transaction-block-row-account-avatar-spacing: "md";
$transaction-block-row-has-state-top-spacing: map-deep-get($token-spacer-stack-max-map, "sm");

.#{$namespace}transactionBlock {

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

	$self: &;

	/* properties of current element  + media queries */

	@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1000");
	@include media-breakpoint-up(lg) {
		@include custom-prop-fallback("padding", "sys-space-inset-horizontal-1500");
	}

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

	// transactionBlock__inner
	&__inner {

		margin: -($transaction-block-negative-margin);
		border-radius: map-deep-get($token-radius-map, "8");

	}

	&__row,
	&__rowInner {

		display: flex;
		align-items: flex-start;
		@include spacer-component-inline("lg");

	}

	&__row {

		position: relative;
		z-index: z("zero");

		padding: $transaction-block-row-padding;
		border-radius: map-deep-get($token-radius-map, "16");

		&::before {

			content: "";
			position: absolute;
			z-index: z("negative");
			top: 0;
			bottom: 0;
			left: map-deep-get($token-spacer-unit-map, "24");
			transform: translateX(-50%);
			width: $border-width*2;
			@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");

		}

		&.-first.-first {

			&::before {
				height: auto;
				top: map-deep-get($token-spacer-stack-max-map, "xxl");
			}

		}
		
		&:last-child {

			&::before {

				height: $item-connector-dimensions-global + $border-width;
				bottom: auto;

			}
			
		}

		&.-total {

			#{$self}__itemConnector {

				display: none;

			}

			&::before {

				bottom: 50%;

			}

		}

		&.-first.-first,
		&.-total.-total {
			z-index: z("high");
		}

		&.-infoHeader {

			&,
			#{$self}__rowInner {

				align-items: center;
				border-bottom: $border-width solid;
				@include custom-prop-fallback("border-color", "sys-color-border-primary-moderate");
				padding-bottom: map-deep-get($token-spacer-inset-map, "lg");
				padding-left: 0;
				padding-right: 0;
				border-bottom-right-radius: 0;
				border-bottom-left-radius: 0;
				margin-bottom: map-deep-get($token-spacer-inset-map, "sm");
				margin-left: map-deep-get($token-spacer-inset-map, "sm");
				margin-right: map-deep-get($token-spacer-inset-map, "sm");
				@include spacer-component-inline("md");

			}
			
			#{$self}__rowInner {

				padding: 0;
				border-bottom: none;
				margin: 0;

			}

			&::before {

				content: none;

			}

		}

		&.-detailFullHeight {

			&::before {

				height: calc(100% - #{map-deep-get($token-spacer-unit-map,"8")});

			}

			#{$self}__itemConnector {

				align-self: flex-end;

				&::before {

					top: auto;
					bottom: 0;
					transform: translate(-50%, 0);

				}

				&::after {

					content: none;

				}

			}

		}

		&:not(.-total):not(.-detailFullHeight):not(.-infoHeader):not(.-first):hover {

			@media (hover: hover) {

				@include custom-prop-fallback("background-color", "sys-color-background-primary-6");

				#{$self}__arrowAmount {
					.#{$namespace}amount {
						@include custom-prop-fallback("background-color", "sys-color-background-primary-6");
					}
				}

			}
		}

		&.-rejected,
		&.-accepted {

			& + & {

				margin-top: $transaction-block-row-has-state-top-spacing;

			}

			&::before {

				top: -($transaction-block-row-has-state-top-spacing);

			}

		}

		&.-rejected {

			// follows same logic as base element

			@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");

			#{$self}__arrowAmount .#{$namespace}amount {
				@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");
			}

			#{$self}__edit,
			#{$self}__validate {
				visibility: hidden;
			}

			#{$self}__cancel {

				@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
				@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

			}

		}

		// transactionBlock -dateEdit

		// transactionBlock -accepted
		&.-accepted {

			// follows same logic as base element
			@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");

			#{$self}__arrowAmount .#{$namespace}amount {
				@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");
			}

			#{$self}__edit,
			#{$self}__cancel {
				visibility: hidden;
			}

			#{$self}__validate {

				@include custom-prop-fallback("background-color", "sys-color-background-status-success-100");
				@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

			}

		}

	}

	&__rowContent {

		padding-left: $avatar-small-dimensions-global + map-deep-get($token-spacer-inline-map, $transaction-block-row-account-avatar-spacing);
		padding-bottom: map-deep-get($token-spacer-inset-map, "sm");

	}

	&__mainInfo {

		// follows same logic as parent

		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		@include spacer-component-inline("lg");
		width: 100%;

	}

	&__mainInfoAccount {

		display: flex;
		align-items: center;
		@include spacer-component-inline($transaction-block-row-account-avatar-spacing);
		position: relative;
		width: $transaction-block-row-fixed-col-total-width;
		flex-shrink: 0;

	}

	&__meta {

		@include custom-prop-fallback("color", "sys-color-text-primary-muted");
	}

	&__itemConnector {
		margin-right: map-deep-get($token-spacer-inline-map, "md");
	}

	&__misc {
		text-align: right;
	}

	&__headerInfo {

		@include spacer-component-inline("lg");

	}

	&__collapseInner {

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

		#{$self}__row {

			&:first-child {

				&::before {

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

				}

			}

		}

	}

	&__collapseToggle {

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

		&::after {

			content: "";
			position: absolute;
			z-index: z("negative");
			top: 50%;
			bottom: 0;
			left: map-deep-get($token-spacer-unit-map, "24");
			transform: translateX(-50%) scaleY(0);
			width: $border-width*2;
			@include custom-prop-fallback("background-color", "sys-color-border-primary-moderate");
			transition: transform 0.025s linear;
			transition-delay: $transition-collapse-duration;

		}

		&[aria-expanded="true"] {

			> * {

				&::before {

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

				}

			}

			&::after {

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

			}

		}

	}

	&__arrowAmount {

		.#{$namespace}amount {
			@include custom-prop-fallback("background-color", "comp-card-background-color");
			padding-left: 0;
		}

	}

	&__colWrapperFixed {

		display: flex;
		align-items: center;
		width: $transaction-block-row-fixed-col-total-width;
		
		> * + * {

			margin-right: $transaction-block-row-element-horizontal-margin-global;
			
			&:last-child {
				margin-right: 0;
			}

		}

	}

	&__col {

		&.-amount {

			width: $transaction-block-amount-price-col;
			@include spacer-component-inline("md");
			flex-shrink: 0;

		}

		&.-account {

			width: $transaction-block-account-info-col;
			//margin-right: map-deep-get($token-spacer-inline-map, "lg");

		}

		&.-alignEnd {
			margin-left: auto;
		}

		&.-transactions {

			display: flex;
			align-items: center;
			@include spacer-component-inline("md");

		}

		&.-dateEdit {
			display: flex;
			@include spacer-component-inline("lg");
		}

		&.-communication {

			min-width: 0;

			> * {

				@include text-truncate;

			}

		}

	}

	&__transactionDataIcon {

		margin-left: 0.225em;

	}

	&__infoTable {

		flex-grow: 1;

	}
	
	&__footer {

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

	}

	/* modifiers */

	// transactionBlock -rejected
	&.-rejected {

		// follows same logic as base element

		#{$self}__inner,
		#{$self}__arrowAmount .#{$namespace}amount {

			@include custom-prop-fallback("background-color", "sys-color-background-secondary-6");

		}

		#{$self}__edit,
		#{$self}__validate {
			visibility: hidden;
		}

		#{$self}__cancel {

			@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
			@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

		}

	}

	// transactionBlock -dateEdit

	// transactionBlock -accepted
	&.-accepted {

		// follows same logic as base element

		#{$self}__inner,
		#{$self}__arrowAmount .#{$namespace}amount {

			@include custom-prop-fallback("background-color", "sys-color-background-status-success-6");

		}

		#{$self}__edit,
		#{$self}__cancel {
			visibility: hidden;
		}

		#{$self}__validate {

			@include custom-prop-fallback("background-color", "sys-color-background-secondary-100");
			@include custom-prop-fallback("color", "sys-color-text-neutral-inverse");

		}

	}

	&.-notCollapsible {

		#{$self}__row.-total {

			#{$self}__itemConnector {

				display: inline-flex;

			}

			#{$self}__collapseToggle {

				display: none;

			}

			#{$self}__edit {
				display: none;
			}

		}

	}

	&.-noValidation {

		#{$self}__cancel {
			margin-right: 0;
		}
		
		#{$self}__validate {
			display: none;
		}

	}

	&.-fluidTransactions {

		#{$self}__colWrapperFixed {

			width: auto;

		}
		
		#{$self}__col {

			&.-amount {

				width: $transaction-block-amount-price-col-global;
				
			}

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}