

@use "sass:meta";
@use 'common.scss' with (
  $table-row-selected: 224 224 224,
  $table-row-selected-text: 0 0 0
);
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss' with ($table-typography-selector: ".ui.table");

/*
 * Styling for DataTables with Semantic UI
 */

table.dataTable.table {
	margin: 0;

	// Override default row striping, replacing with an insert box-shadow
	&.ui.striped > tbody > tr:nth-child(2n) {
		background-color: transparent;
	}

	@include common.row-stripes('.striped', '.hover', 0.02, 0.05, ':nth-child(2n)');

	// Workaround for https://github.com/fomantic/Fomantic-UI/issues/3250
	> thead > tr > td {
		text-align: inherit;
		color: rgba(0,0,0,.87);
		padding: .5em .78571429em;
		vertical-align: inherit;
		font-style: none;
		text-transform: none;
		border-bottom: 1px solid rgba(34,36,38,.1);
	}
	
	&.celled {
		// Workaround for https://github.com/fomantic/Fomantic-UI/issues/3250
		> thead > tr > td:not(:first-child) {
			border-left: 1px solid rgba(34,36,38,.1);
		}
	}
}

@include meta.load-css('ordering.scss');
@include common.layout;
@include common.layout-cells;

// DataTables' built in feature elements
div.dt-container.dt-semanticUI {
	position: relative;

	> div.row {
		display: flex;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;

		&:first-child {
			padding-top: 1rem;
		}
		&:last-child {
			padding-bottom: 1rem;
		}
	}

	div.dt-length {
		// Match the height of the drop down when Semantic UI JS isn't present
		select {
			vertical-align: middle;
			min-height: 2.7142em;
		}

		.ui.selection.dropdown {
			min-width: 0;
		}
	}

	div.dt-search {
		span.input {
			margin-left: 0.5em;
		}
	}

	div.dt-info {
		white-space: nowrap;
	}

	div.dt-processing {
		position: absolute;
		top: 50%;
		left: 50%;
		width: 200px;
		margin-left: -100px;
		text-align: center;
	}

	div.dt-scroll {
		width: 100%;
		padding: 0;
	}

	// Merge the three scrolling tables into one
	div.dt-scroll-head {
		table.dataTable {
			border-bottom-right-radius: 0;
			border-bottom-left-radius: 0;
			border-bottom: none;
		}
	}

	div.dt-scroll-body {
		thead { // Hide sort icons
			.dt-orderable-asc:before,
			.dt-orderable-desc:after {
				display: none;
			}
		}

		table.dataTable {
			border-radius: 0;
			border-top: none;
			border-bottom-width: 0;
		}

		table.dataTable.no-footer {
			border-bottom-width: 1px;
		}
	}

	div.dt-scroll-foot {
		table.dataTable {
			border-top-right-radius: 0;
			border-top-left-radius: 0;
			border-top: none;
		}
	}
}

@media screen and (max-width: 767px) {
	div.dt-container {
		div.left,
		div.right {
			text-align: center !important;
		}
	}
}
