
@use "sass:meta";
@use 'common.scss';
@use 'ordering.scss';
@use 'processing.scss';
@use 'typography.scss';

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

	div.dt-search {
		input {
			margin-left: 0.5em;
			width: auto;
			background-color: whitesmoke;
			padding: 16px 3px;
		}
	}

	div.dt-info {
		padding-top: 10px;
		white-space: nowrap;
	}

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

	div.dt-paging {
		button.mdl-button {
			min-width: 0;
		}
	}

	div.mdc-grid.dt-table {
		padding-top: 0;
		padding-bottom: 0;

		> div.mdc-cell {
			margin-top: 0;
			margin-bottom: 0;
		}
	}

	table.mdc-data-table__table {
		table-layout: auto;
		thead {
			tr{
				th{
				&.sorting_asc,
				&.sorting_desc {
					padding-right: 30px;
				}
		
				&:active {
					outline: none;
				}
		
				&.sorting_asc,
				&.sorting_desc,
				&.sorting {
					cursor: pointer;
					position: relative;
		
					&:before,
					&:after {
						position: absolute;
						display: block;
						opacity: 0.3;
						right: 1em;
						line-height: 9px;
						font-size: 0.9em;
					}
		
					&:before {
						bottom: 50%;
						content: "\25B4"; // up arrow - ascending
					}
		
					&:after {
						top: 50%;
						content: "\25BE"; // down arrow - descending
					}
				}
		
				&.sorting_asc:before,
				&.sorting_desc:after {
					opacity: 0.8;
				}
				}
			}
		}
	}

	div.mdc-layout-grid {
		margin: 0px;
		padding: 5px;
	}
}


@include meta.load-css('typography.scss');
@include meta.load-css('ordering.scss');
