/* variables specific to current element */

$element-specific-variables: "";

.#{$namespace}table {

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

	$self: &;

	/* properties of current element  + media queries */
	flex-grow: 1;

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

	// table__childElement
	&__childElement {

		// follows same logic as parent

	}

	TH {

		padding-top: 0 !important;
		vertical-align: bottom !important;
		border-bottom-width: $table-border-width !important;

	}

	TBODY {
		
		TD {

			border: 0;

		}	

		&::before,
		&::after {

			content: "";
			display: block !important;
			height: map-deep-get($token-spacer-unit-map, "16") !important;
			width: 100% !important;

		}

	}

	TFOOT {

		TH,TD {

			padding-bottom: 0 !important;
			vertical-align: bottom !important;
			border-top: $table-border-width solid !important;
			@include custom-prop-fallback("border-top-color", "sys-color-border-primary-moderate", true, true);
			border-bottom: 0;

		}

	}

	CAPTION {

		@extend %textHelper3xs;
		@include custom-prop-fallback("color","sys-color-text-primary-muted");
		padding-left: $table-cell-padding-x;

	}

	/* modifiers */

	// table -verticalBorder
	&.-verticalBorder {

		// follows same logic as base element
		
		TH, TD {
			border: 0 !important;
		}
		
		THEAD {
			
			TH + TH {

				border-left: $border-width solid;
				@include custom-prop-fallback("border-left-color", "sys-color-border-primary-moderate", true, true);

			}
			
			TH {

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

			}
			
		}

		TBODY {

			&::before,
			&::after {

				content: none;

			}

			TR:first-of-type {

				TH, TD {

					padding-top: 0 !important;

				}

			}

			TR:last-of-type {

				TH, TD {

					padding-bottom: 0 !important;

				}

			}

			TH + TD,
			TD + TD {

				border-left: $border-width solid !important;
				@include custom-prop-fallback("border-left-color", "sys-color-border-primary-moderate", true, true);

			}

		}
		
	}

	&.-hasBorder {

		TBODY {

			tr {

				td {

					border-bottom: $border-width solid;
					@include custom-prop-fallback("border-bottom-color", "sys-color-border-primary-subtle");

				}

				&:last-child {

					td {

						border-bottom: none;

					}

				}

			}

		}

	}

	&.-hasHeaderLeft {

		TBODY {

			&::before,
			&::after {

				content: none;

			}

		}

		TBODY,
		TFOOT {

			tr {

				th {

					border-right: $border-width solid;
					@include custom-prop-fallback("border-right-color", "sys-color-border-primary-moderate");
					border-bottom: 0 !important;

				}

				td {

					&:nth-child(2){

						padding-left: $table-cell-padding-x * 3 !important;

					}

				}

			}

		}

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}