.list-item {

	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;

	display: block;
	position: relative;
	padding: 9px 10px 9px 40px;
	border-top: 1px solid $faint_grey;
	border-bottom: 1px solid $faint_grey;
	margin-bottom: -1px;
	@include clearfix;

	&.selected {
		background: #FFF39C !important;
	}

	&:not(.header):hover {
		background: $faint_grey;
		cursor: pointer;
		border-color: $faint_grey;
	}

	&.header {
		font-size: 10px;
		color: #CCCCCC;
		text-transform: uppercase;
		border-top: 0;
		padding-bottom: 2px;
	}


	&.track {

		.col {
			&.name,
			&.artists,
			&.album {
				width: 30%;
			}
		}

		.select-state {
			position: absolute;
			top: 12px;
			left: 15px;
			font-size: 10px;
		}

		&.playing {
			font-weight: 600;
		}
	}


	&.playlist {

		.col {
			&.name {
				width: 30%;
			}
			&.owner {
				width: 20%;
			}
		}
	}
}

.artist-list {
	.artist {
		display: block;
		border: 0;
		margin-bottom: 5px;
		@include clearfix;

		.thumbnail {
			@include animate();
			width: 50px;
			margin-right: 15px;
			float: left;
			border: 3px solid transparent;
		}

		.name {
			display: block;
			padding-top: 20px;
		}

		&.a:hover {
			.thumbnail {
				border-color: $turquoise;
				opacity: 0.8;
			}
		}
	}
}