//
// Mixins
//
@mixin control() {
	display: inline-block;
	box-sizing: border-box;
	content: '';
}

@mixin control-open($color) {
	border-top: var(--dtr-control-triangle_size) solid transparent;
	border-left: calc(var(--dtr-control-triangle_size) * 2) solid $color;
	border-bottom: var(--dtr-control-triangle_size) solid transparent;
	border-right: 0px solid transparent;
}

@mixin control-close($color) {
	border-top: calc(var(--dtr-control-triangle_size) * 2) solid $color;
	border-left: var(--dtr-control-triangle_size) solid transparent;
	border-bottom: 0px solid transparent;
	border-right: var(--dtr-control-triangle_size) solid transparent;
}

//
// Table styles
//
table.dataTable {
	// Styling for the `inline` type
	&.dtr-inline.collapsed > tbody {
		> tr {
			> td.child,
			> th.child,
			> td.dataTables_empty {
				cursor: default !important;

				&:before {
					display: none !important;
				}
			}
		}

		> tr > td.dtr-control,
		> tr > th.dtr-control {
			cursor: pointer;

			&:before {
				margin-right: 0.5em;

				@include control;
				@include control-open(var(--dtr-control-triangle_color));
			}

			&.arrow-right::before {
				border-top: var(--dtr-control-triangle_size) solid transparent;
				border-left: 0px solid transparent;
				border-bottom: var(--dtr-control-triangle_size) solid transparent;
				border-right: 10px solid var(--dtr-control-triangle_color);
			}
		}

		> tr.dtr-expanded {
			> td.dtr-control:before,
			> th.dtr-control:before {
				@include control-close(var(--dtr-control-triangle_color));
			}
		}
	}

	// DataTables' `compact` styling
	&.dtr-inline.collapsed.compact > tbody {
		> tr > td.dtr-control,
		> tr > th.dtr-control {
			padding-left: 0.333em;
		}
	}

	// Styling for the `column` type
	&.dtr-column > tbody {
		> tr > td.dtr-control,
		> tr > th.dtr-control,
		> tr > td.control,
		> tr > th.control {
			cursor: pointer;

			&:before {
				@include control;
				@include control-open(var(--dtr-control-triangle_color));
			}

			&.arrow-right::before {
				border-top: var(--dtr-control-triangle_size) solid transparent;
				border-left: 0px solid transparent;
				border-bottom: var(--dtr-control-triangle_size) solid transparent;
				border-right: calc(var(--dtr-control-triangle_size) * 2) solid
					var(--dtr-control-triangle_color);
			}
		}

		> tr.dtr-expanded {
			td.dtr-control:before,
			th.dtr-control:before,
			td.control:before,
			th.control:before {
				@include control-close(var(--dtr-control-triangle_color));
			}
		}
	}

	// Child row styling
	> tbody > tr.child {
		&:hover {
			background: transparent !important;
		}

		ul.dtr-details {
			display: inline-grid;
			grid-template-columns: minmax(125px, 1fr) auto;
			gap: var(--dtr-details-list_gap);
			list-style-type: none;
			margin: 0;
			padding: var(--dtr-details-list_padding);

			> li {
				display: contents;

				&:first-child {
					padding-top: 0;
				}

				&:last-child {
					padding-bottom: 0;
					border-bottom: none;
				}
			}
		}

		span.dtr-title {
			display: inline-block;
			min-width: 125px;
			font-weight: bold;
		}
	}
}

div.dtr-modal {
	position: fixed;
	box-sizing: border-box;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;

	z-index: 100;
	padding: 10em 1em;

	div.dtr-modal-display {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		width: 50%;
		height: fit-content;
		max-height: 75%;
		overflow: auto;
		margin: auto;
		z-index: 102;
		overflow: auto;
		background: var(--dtr-modal_background);
		border: var(--dtr-modal_border);
		border-radius: var(--dtr-modal_border-radius);
		box-shadow: var(--dtr-modal_box-shadow);
	}

	div.dtr-modal-content {
		position: relative;
		padding: 2.5em;

		h2 {
			margin-top: 0;
		}
	}

	div.dtr-modal-close {
		position: absolute;
		top: 6px;
		right: 6px;
		width: 22px;
		height: 22px;
		text-align: center;
		border-radius: 3px;
		cursor: pointer;
		z-index: 12;
	}

	div.dtr-modal-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 101;

		background: var(--dtr-modal-background_background);
	}
}

@media screen and (max-width: 767px) {
	div.dtr-modal div.dtr-modal-display {
		width: 95%;
	}
}

@media screen and (max-width: 567px) {
	table.dataTable > tbody > tr.child ul.dtr-details {
		display: block;
		padding: 0;

		> li {
			display: block;
			padding-bottom: var(--dtr-details-list_gap);

			&:last-child {
				padding-bottom: 0;
			}

			span.dtr-title {
				display: block;
			}

			span.dtr-data {
				display: block;
			}
		}
	}
}