deemixer/src/styles/scss/globals/_tables.scss

.table {
	width: 100%;
	-webkit-border-horizontal-spacing: 0px;
	-webkit-border-vertical-spacing: 0px;

	--vertical-separator: 7px;

	tbody {
		tr:not(.table__row-no-highlight):hover {
			background: var(--table-highlight);
		}
	}

	tr {
		background: var(--table-bg);
		transition: background-color 175ms ease-in-out;

		&:nth-child(even) {
			background: var(--table-zebra);
			transition: background-color 175ms ease-in-out;
		}

		&:not(:last-child) {
			border-bottom: 1px solid var(--table-highlight);
		}
	}

	td,
	th {
		vertical-align: middle;
	}

	th {
		.sortable {
			-webkit-user-select: none;
			user-select: none;
		}

		.sort-asc,
		.sort-desc {
			&::after {
				font-size: 0.7em;
				padding-left: 3px;
				line-height: 0.7em;
			}
		}

		.sort-asc::after {
			content: '\25b2';
		}

		.sort-desc::after {
			content: '\25bc';
		}
	}

	td {
		padding: var(--vertical-separator) 10px;

		&:first-child {
			padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
		}

		&:last-child {
			padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
		}

		img {
			vertical-align: middle;
		}
	}

	.table__icon {
		box-sizing: content-box;
		width: 32px;

		&--big {
			width: 48px;
			text-align: center;
		}
	}

	.table__cell {
		&--x-small {
			width: 0.32%;
		}

		&--small {
			width: 3.2%;
		}

		&--medium {
			width: 28.7%;
		}

		&--large {
			width: 50%;
		}

		&--left {
			text-align: left;
		}

		&--center {
			text-align: center;
		}

		&--right {
			text-align: right;
		}

		&--download {
			cursor: pointer;

			i.material-icons {
				transition: color 175ms ease-in-out;
			}

			&:hover {
				i.material-icons {
					color: var(--table-bg);
				}
			}
		}
	}

	.table__cell-content {
		&.table__cell-content--vertical-center {
			// Wrap cell content in this to center vertically cells
			// with material icons or both material icons and text
			display: flex;
			align-items: center;
		}
	}
}

.track_row > td > img {
	width: 32px;
	height: 32px;
}

.track_row > td > a > img {
	width: 56px;
	height: 56px;
}

.top-tracks-position {
	padding: 12px;
	text-align: center;
	cursor: default;
}

/* === Tracks Table === */
.table--tracks {
	border-collapse: collapse;

	--radius: 3px;
}

.table--tracks thead {
	border-bottom: 2px solid var(--table-highlight);
}

.table--tracks th {
	padding-bottom: 10px;
	height: 45px;
}

.table--tracks td {
	height: 35px;
}

.table--tracks td.breakline {
	word-break: break-word;
}

.table--tracks tr:first-child td:first-child {
	border-top-left-radius: var(--radius);
}

.table--tracks tr:first-child td:last-child {
	border-top-right-radius: var(--radius);
}

.table--tracks tr:last-child td:first-child {
	border-bottom-left-radius: var(--radius);
}

.table--tracks tr:last-child td:last-child {
	border-bottom-right-radius: var(--radius);
}

/* === Tracklist Table === */

/* .table--tracklist {} */

.table--tracklist thead {
	border-bottom: 2px solid var(--table-highlight);
}

.table--tracklist th {
	height: 45px;
	padding: var(--vertical-separator) 10px;
}

.table--tracklist th:first-child {
	padding: var(--vertical-separator) 10px var(--vertical-separator) 20px;
}

.table--tracklist th:last-child {
	padding: var(--vertical-separator) 20px var(--vertical-separator) 10px;
}

.table--tracklist td {
	height: 35px;
}

.explicit_tracklist {
	margin-left: var(--explicit-separator);
}

/* === Charts Table === */

/* .table--charts {} */

.table--charts td {
	height: 35px;
}