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

$comparison-table-th-width: 250px;
$comparison-table-th-width-desktop: 320px;
$comparison-table-cell-padding-inline: $table-cell-padding-x;
$comparison-table-top-spacing: map-deep-get($token-spacer-inset-map, "sm");
$comparison-table-bottom-spacing: map-deep-get($token-spacer-inset-map, "sm");


.#{$namespace}comparisonTable {

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

	$self: &;

	/* properties of current element  + media queries */
	@include custom-prop-fallback("background-color", "sys-color-elevation-surface-flat");
	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 */

	// comparisonTable__meta
	&__meta {

		// follows same logic as parent

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

	}

	TABLE {

		border-collapse: separate;
		border-spacing: map-deep-get($token-spacer-inset-map, "sm") 0;

		&:has(TR TD + TD:nth-of-type(2):last-of-type) {

			@include media-breakpoint-up("md") {

				table-layout: fixed;
				TH,
				TD#{$self}__dimensionCell {

					width: 33.3333% !important;

				}

			}

		}

	}

	[data-#{$namespace}gradient-overflow-h] {

		padding-top: $comparison-table-top-spacing;
		padding-bottom: $comparison-table-bottom-spacing;

		&::before,
		&::after {

			top: -($comparison-table-bottom-spacing);
			bottom: -($comparison-table-bottom-spacing);

		}

	}


	TD {

		padding-left: $comparison-table-cell-padding-inline !important;
		padding-right: $comparison-table-cell-padding-inline !important;
		vertical-align: top;

		@include media-breakpoint-up(md) {
			vertical-align: middle;
			min-width: 200px;
		}

	}

	&__stickyHeader {

		z-index: z("sticky");

		> * {

			width: calc(50% - #{map-deep-get($token-spacer-inline-map, "sm")});

		}

	}

	&__header {
		
		> TR:nth-last-of-type(2) > TH + TH {

			padding-bottom: 0 !important;
			border-bottom-left-radius: 0;
			border-bottom-right-radius: 0;
			//width: 33.3333333%;
		}

		> TR:nth-of-type(2) > TH {

			border-top-left-radius: 0;
			border-top-right-radius: 0;
			padding: $box-md-inset-spacing-desktop-global !important;
			//width: 50%;

		}

		> TR:first-of-type > TH:first-of-type {

			width: $comparison-table-th-width;
			min-width: $comparison-table-th-width;
			padding-left: map-deep-get($token-spacer-inset-map, "lg") !important;
			padding-right: map-deep-get($token-spacer-inset-map, "lg") !important;
			display: none;

			@include media-breakpoint-up("md") {

				width: $comparison-table-th-width-desktop;
				min-width: $comparison-table-th-width-desktop;
				display: table-cell;

			}


		}

		TH {

			font-weight: map-deep-get($token-font-weight-map, "regular");

			& + TH {

				padding: $box-md-inset-spacing-desktop-global !important;

			}

		}

	}

	&__header,
	&__body {

		/* increment the number after "through" if there are more products */

		@for $i from 1 through 6 {

			> TR > #{$self}__dimensionCell:nth-last-of-type(n+#{$i}):nth-last-of-type(-n+#{$i}):first-of-type,
			> TR > #{$self}__dimensionCell:nth-last-of-type(n+#{$i}):nth-last-of-type(-n+#{$i}):first-of-type ~ #{$self}__dimensionCell {

				@include media-breakpoint-up(md) {
					width: math.div(100%, $i);
				}

			}

		}

	}

	&__body {

		&::before {

			content: "";
			display: block;
			padding-top: map-deep-get($token-spacer-stack-max-map, "sm");

		}

		> TR > TH:first-of-type {

			width: $comparison-table-th-width;
			min-width: $comparison-table-th-width;
			text-align: left;
			padding-left: map-deep-get($token-spacer-inset-map, "lg") !important;
			padding-right: map-deep-get($token-spacer-inset-map, "lg") !important;
			display: none;

			@include media-breakpoint-up(md) {

				width: $comparison-table-th-width-desktop;
				min-width: $comparison-table-th-width-desktop;
				display: table-cell;

			}

		}

		#{$self}__hoveredRow {

			@include media-breakpoint-up(md) {

				&:hover {

					TH,
					TD {

						position: relative;

						&::before {

							content: "";
							position: absolute;
							z-index: z("negative");
							top: 0;
							height: 100%;
							left: 0;
							right: -(map-deep-get($token-spacer-inset-map, "sm"));
							@include custom-prop-fallback("background-color", "sys-color-elevation-surface-sunken");

						}

					}

					TH {

						&::before {

							border-top-left-radius: map-deep-get($token-radius-map, "16");
							border-bottom-left-radius: map-deep-get($token-radius-map, "16");

						}

					}

					TD:last-child {

						&::before {

							right: 0;
							border-top-right-radius: map-deep-get($token-radius-map, "16");
							border-bottom-right-radius: map-deep-get($token-radius-map, "16");

						}

					}

				}

			}

		}

		> TR > TD {

			text-align: center;
			width: 50%;

		}

		TD {

			font-weight: map-deep-get($token-font-weight-map, "semi-bold");

			&::before {

				content: attr(data-th-content);
				display: block;
				margin-bottom: map-deep-get($token-spacer-stack-max-map, "sm");
				font-weight: map-deep-get($token-font-weight-map, "regular");

				@include media-breakpoint-up(md) {

					content: none;

				}

			}

			@include media-breakpoint-up(md) {

				font-weight: map-deep-get($token-font-weight-map, "regular");

			}

		}

		TR:first-of-type {

			TH,
			TD {

				padding-bottom: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;

			}

		}

		> TR {

			TH,
			TD {

				padding-top: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;
				padding-bottom: math.div(map-deep-get($token-spacer-inset-map, "lg"),2) !important;

			}

		}

	}

	TH, TD {

		&.-hidden {

			display: none;

			@include media-breakpoint-up(md) {

				display: table-cell;

			}

		}

	}
	
	#{$self}__dimensionCell {
		
		SUP {

			margin-right: calc(-1em - 10px);
			width: 18px;
			display: inline-block;

		}
		
	}

	&__nestedCell#{$self}__nestedCell {

		padding-left: 0 !important;
		padding-right: 0 !important;
		padding-top: 0 !important;


	}

	&__toggle {

		&[aria-expanded="true"] {

			[class*="icon"] {

				&::before {

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

				}

			}

		}

	}

	&__rowTitle {

		display: flex;
		@include spacer-component-inline("md");
		font-weight: map-deep-get($token-font-weight-map, "semi-bold");
		@include custom-prop-fallback("color","sys-color-text-primary-contrast");
		font-family: map-deep-get($token-font-family-map, "text");

	}

	&__disabled {

		@include custom-prop-fallback("color", "sys-color-text-neutral-vivid");

	}

	&__valid {

		@include custom-prop-fallback("color", "sys-color-text-status-success-vivid");

	}

	&__img {

		text-align: right;
		margin-right: -($comparison-table-cell-padding-inline);

		IMG, svg {

			width: 160px;

		}

	}

	&__footer {

		margin-top: -(map-deep-get($token-spacer-unit-map, "12"));
		padding-top: map-deep-get($token-spacer-inset-map, "md");
		padding-bottom: map-deep-get($token-spacer-inset-map, "md");

	}


	/* modifiers */

	// comparisonTable -altStyle
	&.-altStyle {

		// follows same logic as base element

	}

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

	/* Pseudo Classes */

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

		}
	}

	&:focus {
	}

	&:active {
	}

	&:focus,
	&:active {
	}

}