$vertical-separator: 7px;
$table-border-radius: 3px;

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

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

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

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

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

	td,
	th {
		vertical-align: middle;
	}

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

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

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

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

	td {
		padding: $vertical-separator 10px;

		&:first-child {
			padding: $vertical-separator 10px $vertical-separator 20px;
		}

		&:last-child {
			padding: $vertical-separator 20px $vertical-separator 10px;
		}

		img {
			vertical-align: middle;
		}
	}

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

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

		tr {
			&:first-child {
				td {
					&:first-child {
						border-top-left-radius: $table-border-radius;
					}

					&:last-child {
						border-top-right-radius: $table-border-radius;
					}
				}
			}

			&:last-child {
				td {
					&:first-child {
						border-bottom-left-radius: $table-border-radius;
					}

					&:last-child {
						border-bottom-right-radius: $table-border-radius;
					}
				}
			}
		}
	}

	/* === Tracklist Table === */
	&--tracklist {
		thead {
			border-bottom: 2px solid var(--table-highlight);
			text-transform: capitalize;
		}

		th {
			padding: $vertical-separator 10px;
			height: 45px;

			&:first-child {
				padding: $vertical-separator 10px $vertical-separator 20px;
			}

			&:last-child {
				padding: $vertical-separator 20px $vertical-separator 10px;
			}
		}

		td {
			height: 35px;
		}
	}

	/* === Charts Table === */
	&--charts {
		td {
			height: 35px;
		}
	}

	.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;
		}
	}

	.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;
	}

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

.table--tracklist .clickable:hover,
.table--charts .clickable:hover {
	text-decoration: underline;
}
