/* variables specific to current element */

$transaction-table-block-cell-padding: $transaction-table-block-cell-padding-global;
$transaction-table-block-arrow-amount-bg: $transaction-table-block-arrow-amount-bg-global;
$transaction-table-block-row-negative-margin-mobile: $transaction-table-block-row-negative-margin-mobile-global;
$transaction-table-block-row-negative-margin-desktop: $transaction-table-block-row-negative-margin-desktop-global;

.#{$namespace}transactionTableBlock {

	/* 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 {
		@keyframes tableRowModifiedBG {

			0% {

				@include custom-prop-fallback("background-color", "sys-color-text-highlight-muted");

			}

			100% {

				@include custom-prop-fallback("background-image", "sys-color-elevation-surface-flat");

			}

		}
	}


	/* children - write selector in full in comments in order to facilitate search */

	&__header {

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

	}

	&__heading {

		@include custom-prop-fallback("color", "sys-color-text-primary-vivid");
		font-weight: map-deep-get($token-font-weight-map, "bold");
		font-family: map-deep-get($token-font-family-map, "text");

	}

	&__tableWrapper {
		margin: 0 (-($transaction-table-block-row-negative-margin-mobile)) (-($transaction-table-block-row-negative-margin-mobile)) (-($transaction-table-block-row-negative-margin-mobile));
		@include media-breakpoint-up(lg) {
			margin: 0 (-($transaction-table-block-row-negative-margin-desktop)) (-($transaction-table-block-row-negative-margin-desktop)) (-($transaction-table-block-row-negative-margin-desktop));
		}
	}

	&__tableResponsive  {
		padding: 0 $transaction-table-block-row-negative-margin-mobile;
		@include media-breakpoint-up(lg) {
			padding: 0 $transaction-table-block-row-negative-margin-desktop;
		}
	}

	TR TH,
	TR TD {

		/* @TODO remove when old styles are not needed */
		padding-left: $transaction-table-block-cell-padding !important;
		padding-right: $transaction-table-block-cell-padding !important;

	}

	TR TD {

		vertical-align: top !important;

	}
	
	TR TH {
		padding-top: 0 !important;
		border-bottom: $border-width solid $border-color !important;
	}

	THEAD TH {
		vertical-align: middle !important;
	}

	&__row.-hasAction,
	TR {

		position: relative;
		z-index: z("zero");
		
		&.-isDeleted,
		&.-isValidated {
			#{$self}__rowAction {
				pointer-events: none;
				&::before {
					border-color: transparent !important;
				}
			}
		}

		&.-isDeleted {

			#{$self}__rowAction {

				&::before {
					@include custom-prop-fallback("background-color", "sys-color-background-status-danger-6",true,true);

				}

			}

			#{$self}__arrowAmount {

				.#{$namespace}amount {

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

				}

			}

		}

		&.-isValidated {

			#{$self}__rowAction {

				&::before {
					@include custom-prop-fallback("background-color", "sys-color-background-status-success-6",true,true);
				}

			}

			#{$self}__arrowAmount {

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

			}

		}

		TD:first-of-type,
		TH:first-of-type {
			padding-left: 0 !important;
		}

		TD:last-of-type,
		TH:last-of-type {
			padding-right: 0 !important;
		}

		TD:last-of-type {
			padding-left: 0 !important;
			padding-right: 0 !important;
		}

	}

	&__row {

		&.-hasAction {

			&:hover {

				#{$self}__rowAction {
					&::before {
						@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");

					}

				}

			}

		}

	}

	//max-width: 220px on column 2
	//max-width: 260px; column 3

	// transactionTableBlock__accountInfoWidth
	&__accountInfoWidth {

		// follows same logic as parent
		width: 220px + ($transaction-table-block-cell-padding*2);
	}

	// transactionTableBlock__amountInfoWidth
	&__amountInfoWidth {

		// follows same logic as parent
		width: 260px + ($transaction-table-block-cell-padding*2);
	}
	
	&__typeCol {

		width: map-deep-get($token-sizes-unit-map, "56");

	}
	
	&__amountHeaderCol {
		padding-left: $arrowm-amount-offset-left-global + $transaction-table-block-cell-padding !important;
		min-width: 220px;
	}
	
	&__dateCol {width: 150px;}

	&__rowAction {

		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		border-radius: map-deep-get($token-radius-map, "16");
		width: 100%;

		&::before {

			content: "";
			position: absolute;
			z-index: z("negative");
			top: 0;
			left: -($transaction-table-block-row-negative-margin-mobile);
			right: -($transaction-table-block-row-negative-margin-mobile);
			bottom: 0;
			border-radius: map-deep-get($token-radius-map, "16");

			@include media-breakpoint-up(lg) {
				left: -($transaction-table-block-row-negative-margin-desktop);
				right: -($transaction-table-block-row-negative-margin-desktop);
			}

		}

		&:hover{
			&::before {
				background-color: $transaction-table-block-arrow-amount-bg;
				border: 0 !important;
			}
		}

		&:focus {

			&::before {
				top: $border-width*2;
				bottom: $border-width*2;
				border: $border-width*2 solid $border-color;
			}

		}

	}

	&__dateCol,
	&__statusCol {

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

		[class*="icon"] {

			&::before {

				font-size: 1em;

			}

		}

	}

	&__dateCol {

		[class*="icon"] {

			&::before {

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

			}

		}

	}

	&__statusCol {}

	&__typeBtn {

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

	}

	&__meta {

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

	}


	/* modifiers */

	// transactionTableBlock -altStyle
	&.-altStyle {

		// follows same logic as base element

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}