@use 'sass:math';
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/spacing.variables' as spacing;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/colours.variables' as colours;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/breakpoints.variables' as breakpoints;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-sizes.variables' as fontSizes;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/font-weights.variables' as fontWeights;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/line-heights.variables' as lineHeights;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/1-variables/fonts.variables' as fonts;
@use 'pkg:@ongov/ontario-design-system-global-styles/styles/scss/2-tools/functions/global.functions' as globalFunctions;

$ontario-table-caption-background: #0000001a;
$ontario-table-total: #0077a056;
$ontario-table-subtotal: #007b9e1d;
$ontario-table-highlight: #e191003c;
$ontario-table-row-divider: #0000004d;
$ontario-table-zebra-striping: #0000000d;
$ontario-table-shadow--cover: rgba(255, 255, 255, 0);
$ontario-table-shadow--black: rgba(0, 0, 0, 0.2);
$ontario-table-shadow--clear: rgba(252, 0, 0, 0);

$ontario-table-scroller--height: 20px;

$ontario-table-caption-custom-spacing: spacing.$spacing-4 + math.div(spacing.$spacing-1, 2);

.ontario-table-container {
	position: relative;
	margin: spacing.$spacing-2 spacing.$spacing-0 spacing.$spacing-7;
}

.ontario-table-div {
	background:
		linear-gradient(to right, colours.$ontario-colour-white 30%, $ontario-table-shadow--cover),
		linear-gradient(to right, $ontario-table-shadow--cover, colours.$ontario-colour-white 70%) 0 100%,
		linear-gradient(to right, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%),
		linear-gradient(to left, $ontario-table-shadow--black 0%, $ontario-table-shadow--clear 100.01%);
	background-repeat: no-repeat;
	background-size:
		globalFunctions.px-to-rem(40) 100%,
		globalFunctions.px-to-rem(40) 100%,
		globalFunctions.px-to-rem(14) 100%,
		globalFunctions.px-to-rem(14) 100%;
	background-position:
		0 0,
		100%,
		0 0,
		100%;
	background-attachment: local, local, scroll, scroll;
	overflow-x: auto;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		overflow-x: scroll;
	}
}

.ontario-table-scroll--wrapper {
	height: $ontario-table-scroller--height;
	overflow-x: auto;
	overflow-y: hidden;
	display: block;
}

.ontario-table-container table {
	border-collapse: collapse;
	display: table;
	font-size: globalFunctions.px-to-rem(17);
	font-weight: fontWeights.$ontario-font-weights-normal;
	line-height: globalFunctions.px-to-rem(26);

	&.ontario-table--full-container-width {
		display: table;
		width: 100%;
	}

	&.ontario-table--zebra-stripes-enabled {
		tbody {
			tr:nth-child(even) {
				background-color: $ontario-table-zebra-striping;
			}
		}
	}

	&:not(.ontario-table--no-zebra-stripes) {
		tbody {
			tr:first-child:nth-last-child(n + 6),
			tr:first-child:nth-last-child(n + 6) ~ tr {
				&:nth-child(even) {
					background-color: $ontario-table-zebra-striping;
				}
			}
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: fontSizes.$ontario-font-size-standard-body-text;
	}
}

.ontario-table-container caption {
	background-color: $ontario-table-caption-background;
	display: table-caption;
	font-size: globalFunctions.px-to-rem(22);
	font-weight: fontWeights.$ontario-font-weights-bold;
	line-height: globalFunctions.px-to-rem(35);
	padding: $ontario-table-caption-custom-spacing spacing.$spacing-4 $ontario-table-caption-custom-spacing
		spacing.$spacing-5;
	text-align: left;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: fontSizes.$ontario-font-size-large;
		line-height: globalFunctions.px-to-rem(30);
		padding-left: spacing.$spacing-4;
	}
}

.ontario-table-container table thead {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	border-color: colours.$ontario-colour-black;
	vertical-align: text-top;

	th {
		font-size: globalFunctions.px-to-rem(18);
		line-height: lineHeights.$ontario-line-height-7;
		margin: spacing.$spacing-0;
		padding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-4 (spacing.$spacing-5 + spacing.$spacing-1)
			spacing.$spacing-5;
		text-align: left;
		text-size-adjust: none;
		-webkit-text-size-adjust: none;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			font-size: fontSizes.$ontario-font-size-standard-body-text;
			line-height: globalFunctions.px-to-rem(21);
			padding: spacing.$spacing-5 spacing.$spacing-2 spacing.$spacing-5 spacing.$spacing-4;
		}
	}

	th.ontario-table-cell--numeric {
		padding: (spacing.$spacing-5 + spacing.$spacing-1) spacing.$spacing-5 (spacing.$spacing-5 + spacing.$spacing-1)
			spacing.$spacing-4;
		text-align: right;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			padding: spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-2;
		}
	}
}

.ontario-table-container table tbody {
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	vertical-align: text-top;

	tr {
		border: solid;
		border-width: globalFunctions.px-to-rem(1) 0;
		border-color: $ontario-table-row-divider;
	}

	tr:last-child {
		border-width: globalFunctions.px-to-rem(3) 0;
		border-top-width: 0;
		border-color: colours.$ontario-colour-black;
	}

	tr.ontario-table-row--highlight {
		background-color: $ontario-table-highlight !important; // the important flag is needed to override zebra stripe background colour classes

		th {
			padding-left: spacing.$spacing-5;
			display: flex;
			position: relative;

			img.ontario-table--highlight-indicator {
				// Width of yellow triangle svg
				width: globalFunctions.px-to-rem(8);
				position: absolute;
				// Distance from top of svg to top of container
				top: globalFunctions.px-to-rem(24);
				left: 0;
			}
		}
	}

	tr.ontario-table-row--subtotal {
		background-color: $ontario-table-subtotal !important; // the important flag is needed to override zebra stripe background colour classes
	}
}

.ontario-table-container tbody th,
.ontario-table-container tfoot th,
.ontario-table-container table td {
	padding: globalFunctions.px-to-rem(19) spacing.$spacing-4 globalFunctions.px-to-rem(19) spacing.$spacing-5;
	text-align: left;
	letter-spacing: globalFunctions.px-to-rem(0.4);
}

.ontario-table-container tbody th,
.ontario-table-container tfoot th {
	font-weight: fontWeights.$ontario-font-weights-bold;

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		font-size: fontSizes.$ontario-font-size-standard-body-text;
		line-height: globalFunctions.px-to-rem(26);
		padding-right: spacing.$spacing-2;
		padding-left: spacing.$spacing-4;
	}
}

.ontario-table-container table td {
	img {
		vertical-align: top;

		@media screen and (max-width: breakpoints.$small-breakpoint) {
			max-width: none;
		}
	}

	&.ontario-table-cell--numeric {
		font-family: fonts.$ontario-font-courier-prime;
		font-size: globalFunctions.px-to-rem(17);
		padding: globalFunctions.px-to-rem(19) spacing.$spacing-5 globalFunctions.px-to-rem(19) spacing.$spacing-4;
		text-align: right;

		strong {
			font-family: fonts.$ontario-font-courier-prime;
		}
	}
}

.ontario-table-container tbody tr.ontario-table-row--subtotal,
.ontario-table-container tfoot tr {
	border: solid;
	border-width: globalFunctions.px-to-rem(3) 0;
	font-size: fontSizes.$ontario-font-size-standard-body-text;
	border-color: colours.$ontario-colour-black;

	th {
		padding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;
	}

	td {
		font-weight: fontWeights.$ontario-font-weights-bold;
		padding: globalFunctions.px-to-rem(23) spacing.$spacing-4 globalFunctions.px-to-rem(23) spacing.$spacing-5;
	}
}

.ontario-table-container tfoot {
	vertical-align: text-top;

	tr {
		background-color: $ontario-table-total !important; // the important flag is needed to override zebra stripe background colour classes
	}
}

// Column classes
.ontario-table-header--column-span-1 {
	//Equivalent to 1 grid columns
	min-width: 8.33333vw;
}

.ontario-table-header--column-span-2 {
	//Equivalent to 2 grid columns
	min-width: 16.66666vw;
}

.ontario-table-header--column-span-3 {
	//Equivalent to 3 grid columns
	min-width: 25vw;
}

.ontario-table-header--column-span-4 {
	//Equivalent to 4 grid columns
	min-width: 33.33333vw;
}

.ontario-table-header--column-span-5 {
	//Equivalent to 5 grid columns
	min-width: 41.66666vw;
}

.ontario-table-header--column-span-6 {
	//Equivalent to 6 grid columns
	min-width: 50vw;
}

.ontario-table-header--column-span-7 {
	//Equivalent to 7 grid columns
	min-width: 58.33333vw;
}

.ontario-table-header--column-span-8 {
	//Equivalent to 8 grid columns
	min-width: 66.66666vw;
}

.ontario-table-header--column-span-9 {
	//Equivalent to 9 grid columns
	min-width: 75vw;
}

.ontario-table-header--column-span-10 {
	//Equivalent to 10 grid columns
	min-width: 83.33333vw;
}

.ontario-table-header--column-span-11 {
	//Equivalent to 11 grid columns
	min-width: 91.66666vw;
}

.ontario-table-header--column-span-12 {
	//Equivalent to 12 grid columns
	min-width: 100vw;
}

// Condensed tables
.ontario-table-container .ontario-table--condensed {
	td {
		padding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;
		text-align: left;
	}

	td.ontario-table-cell--numeric {
		padding: spacing.$spacing-3 spacing.$spacing-5 spacing.$spacing-3 spacing.$spacing-4;
		font-size: globalFunctions.px-to-rem(17);
		text-align: right;
	}

	tbody th,
	tfoot th {
		padding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-5;
	}

	tr.ontario-table-row--highlight th img.ontario-table--highlight-indicator {
		top: globalFunctions.px-to-rem(17);
	}

	tr.ontario-table-row--subtotal,
	tfoot tr {
		th,
		td {
			padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-5;
		}

		td.ontario-table-cell--numeric {
			text-align: right;
			padding: spacing.$spacing-4 spacing.$spacing-5 spacing.$spacing-4 spacing.$spacing-4;
		}
	}

	@media screen and (max-width: breakpoints.$small-breakpoint) {
		td {
			padding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;
			font-size: fontSizes.$ontario-font-size-standard-body-text;
		}

		td.ontario-table-cell--numeric {
			padding: spacing.$spacing-3 spacing.$spacing-4 spacing.$spacing-3 spacing.$spacing-2;
		}

		tbody th {
			padding: spacing.$spacing-3 spacing.$spacing-2 spacing.$spacing-3 spacing.$spacing-4;
		}

		tr.ontario-table-row--subtotal,
		tfoot tr {
			th,
			td {
				padding: spacing.$spacing-4 spacing.$spacing-2 spacing.$spacing-4 spacing.$spacing-4;
			}

			td.ontario-table-cell--numeric {
				text-align: right;
				padding: spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-4 spacing.$spacing-2;
			}
		}
	}
}