.list-table {
	width: 100%;
	background-color: $ui-bg-color;
	border-collapse: separate;
	border: 1px solid $ui-border-color;

	&.fixed {
		table-layout: fixed;
	}

	thead {
		th {
			height: 100%;
			overflow: hidden;
			border-bottom-width: 2px;
			border-bottom-color: darken($table-border-color, 5%);
			color: $font-alt-color;
			white-space: nowrap;
			vertical-align: bottom;

			.text-vertical {
				max-height: 150px;
				min-width: 22px;
				overflow: hidden;
				text-overflow: ellipsis;
				writing-mode: vertical-lr;
				line-height: 22px;
				transform: rotate(180deg);
			}

			.arrow-up {
				margin-left: 3px;
				border-bottom-color: $font-alt-color;
			}

			.arrow-right {
				margin-left: 3px;
				border-left-color: $font-alt-color;
			}

			.arrow-down {
				margin-left: 3px;
				border-top-color: $font-alt-color;
			}

			a {
				display: block;
				position: relative;
				margin: -1em;
				padding: 1em;
				border: 0;

				@if $ui-transitions {
					transition: background-color $ui-controls-transition-duration ease-out;
				}

				&:hover,
				&:focus,
				&:active {
					text-decoration: none;
					background-color: $ui-hover-bg-color;
				}
			}
		}
	}

	tbody {
		tr {
			&.hidden {
				display: none;
			}

			&:last-child {
				th,
				td {
					border-bottom-style: none;
				}
			}

			&:not(.hover-nobg):not(.row-selected):hover {
				background-color: $ui-hover-bg-color;
			}

			&.row-selected {
				background-color: $lighter-yellow;
			}
		}

		th,
		td {
			&.table-info {
				color: $font-alt-color;
			}

			&.list-table-actions {
				text-align: right;
				white-space: nowrap;
			}
		}
	}

	th,
	td {
		position: relative;
		padding: 6px 5px;
		line-height: 18px;
		text-align: left;
		vertical-align: top;
		border-bottom: 1px solid $table-border-color;

		&.second-col {
			width: 20px;
			padding-left: 0;
			padding-right: 0;
			text-align: center;
		}
	}

	&.sticky-header {
		thead {
			position: sticky;
			top: 0;
			z-index: 1;
			background-color: $ui-bg-color;
		}
	}

	&.sticky-footer {
		tfoot {
			position: sticky;
			bottom: 0;
			z-index: 1;
			background: $ui-bg-color;

			tr:first-of-type {
				td, th {
					border-top: 2px solid darken($table-border-color, 5%);
					border-bottom-style: none;
				}
			}
		}
	}

	.list-table-footer {
		border-bottom: 0;
		color: $font-alt-color;
		text-align: right;

		&:hover {
			background-color: $ui-bg-color;
		}
	}

	.action-container {
		display: flex;
		width: 100%;

		.link-action {
			@extend %overflow-ellipsis;

			height: 16px;
			min-width: 1ch;
		}

		.rel-container {
			display: flex;
		}

		.separator {
			flex-shrink: 0;
			margin-right: 4px;
		}
	}

	.latest-values,
	.opdata {
		max-width: 300px;
	}

	.checkbox-radio {
		margin: 1px 0;

		& + label {
			display: inline-block;
			margin: 1px 0;
			line-height: 1;
			vertical-align: top;

			span {
				margin: 0;
			}
		}
	}

	.wordbreak {
		white-space: normal;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&.compact-view {
		td {
			padding-top: 2px;
			padding-bottom: 2px;
			border-bottom: 0;
			box-shadow: inset 0 -1px 0 0 rgba($font-color, .1);
			white-space: nowrap;

			.rel-container {
				span {
					margin: 0;
				}
			}

			&.nowrap {
				text-overflow: clip;
			}
		}
	}

	&.no-data {
		tbody {
			tr {
				td {
					height: auto;
					color: $font-alt-color;
					text-align: center;

					&:hover {
						background-color: $ui-bg-color;
					}
				}

				.no-data-message {
					&[class^="zi-"], &[class*=" zi-"] {
						margin-top: 100px;
						margin-bottom: 100px;
					}
				}
			}
		}
	}
}

// Buttons and Icons.
.list-table {
	.btn-icon,
	.icon,
	.link-action {
		vertical-align: top;

		&:not(.no-indent):not(:first-child) {
			margin-left: 5px;
		}
	}

	.icon {
		border-radius: 2px;
	}

	.btn-icon:not(.btn-small),
	.icon {
		@extend %button-size-medium;
	}

	.btn-small,
	.problem-icon-link,
	.status-container,
	.entity-count,
	.tag {
		margin-top: 1px;
		margin-bottom: 1px;
		vertical-align: top;
	}
}

// Tags.
.list-table {
	thead {
		th {
			&.column-tags-1 {
				width: 75px;

				@media screen and (min-width: 1200px) {
					width: 106px;
				}

				@media screen and (min-width: 1400px) {
					width: 137px;
				}

				@media screen and (min-width: 1600px) {
					width: 168px;
				}
			}

			&.column-tags-2 {
				width: 124px;

				@media screen and (min-width: 1200px) {
					width: 186px;
				}

				@media screen and (min-width: 1400px) {
					width: 248px;
				}

				@media screen and (min-width: 1600px) {
					width: 310px;
				}
			}

			&.column-tags-3 {
				width: 173px;

				@media screen and (min-width: 1200px) {
					width: 266px;
				}

				@media screen and (min-width: 1400px) {
					width: 359px;
				}

				@media screen and (min-width: 1600px) {
					width: 452px;
				}
			}
		}
	}

	&.compact-view {
		.tag {
			max-width: 40px;

			@media screen and (min-width: 1200px) {
				max-width: 71px;
			}

			@media screen and (min-width: 1400px) {
				max-width: 102px;
			}

			@media screen and (min-width: 1600px) {
				max-width: 133px;
			}
		}
	}
}

.hintbox-wrap {
	.tag {
		cursor: pointer;

		&:last-child {
			margin-right: 0;
		}
	}
}

// Timeline.
.list-table {
	.timeline-date,
	.timeline-axis,
	.timeline-td {
		border-bottom-color: transparent;
	}

	.timeline-date {
		text-align: right;
		white-space: nowrap;
	}

	.timeline-axis,
	.timeline-th,
	.timeline-td {
		position: relative;
		padding: 0;
		width: 6px;
	}

	.timeline-axis {
		&::before {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			bottom: -1px;
			width: 2px;
			background-color: $timeline-color;
		}
	}

	.timeline-dot,
	.timeline-dot-big {
		&::after {
			content: '';
			position: absolute;
			right: -3px;
			width: 4px;
			height: 4px;
			border-radius: 50%;
		}
	}

	.timeline-dot {
		&::after {
			top: 10px;
			background-color: $btn-bg-color;
			border: 2px solid $ui-bg-color;
		}
	}

	.timeline-dot-big {
		&::after {
			top: 11px;
			background-color: $ui-bg-color;
			border: 2px solid $btn-bg-color;
		}
	}
}

// Symptoms.
.list-table {
	.problem-expand-td {
		border-bottom-color: transparent;
	}

	.problem-nested:not([class*='flh-']):not(.row-selected) {
		background-color: darken($ui-bg-color, 5%);

		td,
		.timeline-axis,
		.timeline-td {
			border-bottom-color: darken($ui-bg-color, 5%);
		}
	}

	.problem-nested-small {
		font-size: 11px;

		.tag {
			font-size: 12px;
		}
	}

	&.compact-view {
		.problem-nested:not([class*='flh-']):not(.row-selected) {
			td,
			.timeline-axis,
			.timeline-td {
				border-bottom-style: none;
			}
		}

		[class*='flh-'] {
			&:not(.row-selected):not(:hover) {
				a,
				td,
				sup {
					color: $compact-view-color;
				}

				.link-alt {
					border-bottom-color: $compact-view-color;
				}

				.tag {
					color: $compact-view-tag-color;
					background-color: $compact-view-tag-bg-color;
				}
			}

			&:not(.row-selected):not(:hover) {
				.btn-icon,
				.icon {
					background-color: $ui-bg-color;
				}

				.entity-count {
					margin-top: 0;
					margin-bottom: 0;
					border: 1px solid $ui-bg-color;
				}
			}
		}
	}
}
