@import './icons';

@include body-class(true) {
	.#{$prefix}-list-thumb {
		width: 50px;
		height: 30px;
		flex: 0 0 auto;
		background-color: #e6e6e6;
		background-repeat: no-repeat;
		background-position: center;
		background-size: cover;
		margin: 0 10px;
		border-radius: 4px;

		&.playlist-thumb {
			width: 60px;
			height: 40px;
			background-image: url('../../images/playlist-thumb.png');

			@media only screen and (-webkit-min-device-pixel-ratio: 2),
				only screen and (min--moz-device-pixel-ratio: 2),
				only screen and (-o-min-device-pixel-ratio: 2/1),
				only screen and (min-device-pixel-ratio: 2),
				only screen and (min-resolution: 192dpi),
				only screen and (min-resolution: 2dppx) {
				background-image: url('../../images/playlist-thumb@2x.png');
			}
		}

		&.playlist-video-thumb {
			width: 30px;
			height: 30px;
		}

		&.playlist-video-thumb-wide {
			width: 40;
			height: 25;
		}
	}
}
