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

	.source {
		color: $mid_grey;
		position: absolute;
		top: 10px;
		right: 15px;
	}

	&.selected {
		background: $yellow !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 { width: 40%; }
			&.artists,
			&.album { width: 26%; }
		}

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

		.play-state {
			display: none;
			position: absolute;
			top: 13px;
			left: 15px;
			font-size: 10px;
		}

		&.playing {
			font-weight: 600;
			.play-state {
				display: block;
				opacity: 1;
			}
		}

		&.playing.selected {
			.select-state {
				left: 23px;
			}
			.play-state {
				left: 10px;
			}
		}

		:root .dragging &:hover {
			border-top: 3px solid $blue;
			margin-top: -3px;
			background: transparent;
		}


		@include responsive( $bp_medium ){
			padding: 7px 10px 7px 30px;

			.col {
				&.name { width: 50%; }
				&.artists { width: 50%; }
				&.album { width: 50%; padding-left: 50%; color: $mid_grey; }
				&.duration { display: none; }
			}

			&.header { 
				display: none; 
			}

			.select-state {
				top: 11px;
				left: 10px;
			}
		}

	}


	&.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.artist:hover {
		.thumbnail {
			border-color: $turquoise;
			opacity: 0.8;
		}
	}
}