@import "colors";
@import "breakpoints";

.overlay {
	.content {
		ul {
			list-style: none;

			li {
				width: 100%;
				background-color: $musare_color_white;
				border-top: solid rgba(148, 151, 153, 0.5) .5px;
				border-bottom: solid rgba(148, 151, 153, 0.5) .5px;
				border-right: solid rgba(148, 151, 153, 0.5) .5px;
				margin-bottom: 8px;
				min-height: 79.5px;
				position: relative;

				.left {
					margin-top: -.5px;
					width: 80px;
					top: 0;
					left: 0;
					bottom: 0;
					position: absolute;
					float: left;
					background-color: rgba(148, 151, 153, 0.5);

					img {
						display: block;
						width: 100%;
						height: 80px;
					}
				}

				.right {
					display: block;
					margin-left: 80px;
					height: 100%;
					padding: 4px;
					box-sizing: border-box;
					min-height: 79.5px;

					.duration {
						float: right;
						color: $musare_color_primary_gray;
						font-size: 14px;
						line-height: 19px;
					}

					.title {
						font-size: 14px;
						color: $musare_color_primary_gray;
						font-weight: $font_weight_semibold;
						line-height: 19px;
						display: inline;
					}

					.title-artists-spacing {
						display: block;
					}

					.artists {
						font-size: 13px;
						color: $musare_color_primary_gray;
						line-height: 17px;
						display: inline;
						margin-top: 4px;
					}
				}

				/*div {
					float: right;
					width: 30px;
					color: $musare_color_secondary_gray;
					margin: 5px 5px 0 0;

					.duration {
						font-size: 13px;
						float: left;
					}

					.add {
						float: left;
						cursor: pointer;
						height: 30px;

						i {
							font-size: 30px;
						}
					}
				}*/
			}
		}
	}
}