@playlist_cover_maxSize: 200px;

.playlist {
	position: relative;
	display: flex;
	flex-direction: column;

	cursor: pointer;

	width: @playlist_cover_maxSize;
	max-width: @playlist_cover_maxSize;

	overflow: hidden;

	transition: all 150ms ease-in-out;

	&.row-mode {
		flex-direction: row;

		align-items: center;

		width: fit-content;
		max-width: unset;
		min-width: 100px;

		height: fit-content;

		gap: 10px;

		.playlist_cover {
			width: 50px;
			height: 50px;

			min-width: 50px;
			max-height: 50px;
		}

		.playlist_cover {
			.playlist_cover_mask {
				font-size: 2rem;
			}
		}

		.playlist_info {
			justify-content: center;

			.playlist_info_title {
				display: flex;
				flex-direction: row;

				align-items: center;

				gap: 7px;

				h1 {
					word-break: break-all;
					white-space: wrap;
				}
			}
		}
	}

	&.cover-hovering {
		.playlist_cover {
			.playlist_cover_mask {
				opacity: 1;
			}
		}
	}

	.playlist_cover {
		display: flex;
		position: relative;

		align-items: center;
		justify-content: center;

		width: @playlist_cover_maxSize;
		height: @playlist_cover_maxSize;

		transition: all 0.2s ease-in-out;
		z-index: 50;

		border-radius: 12px;
		overflow: hidden;

		background-color: var(--background-color-accent);

		.image-wrapper {
			width: 100%;
			height: 100%;

			img {
				width: 100%;
				height: 100%;

				object-fit: cover;
			}
		}

		.playlist_cover_mask {
			position: absolute;

			top: 0;
			left: 0;

			display: flex;

			align-items: center;
			justify-content: center;

			width: 100%;
			height: 100%;

			opacity: 0;

			transition: all 0.2s ease-in-out;

			z-index: 55;

			background-color: rgba(var(--layoutBackgroundColor), 0.6);
			color: var(--text-color);

			font-size: 3rem;
		}
	}

	.playlist_info {
		display: flex;
		flex-direction: column;

		width: 100%;
		transition: all 150ms ease-in-out;

		&:hover {
			.playlist_info_title {
				text-decoration: underline;
			}
		}

		.playlist_info_title {
			font-size: 0.7rem;
			font-weight: 600;

			color: var(--background-color-contrast);

			overflow: hidden;

			h1,
			h4 {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;

				margin: 0;
			}
		}

		.playlist_info_subtitle {
			color: var(--text-color);
			font-size: 0.7rem;

			p {
				overflow: hidden;

				text-overflow: ellipsis;
				white-space: nowrap;

				margin: 0;
			}
		}
	}

	.playlist_details {
		display: flex;
		flex-direction: row;

		gap: 8px;
		font-size: 0.7rem;

		text-transform: uppercase;

		svg,
		p {
			margin: 0;
		}
	}
}
