.playlist-container {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	flex-direction: column;
}

.playlist-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.5rem;
	font-weight: bold;
	border-bottom: 1px solid var(--color-c);

	span {
		text-overflow: ellipsis;
		text-wrap-mode: nowrap;
		overflow: hidden;
	}

	button {
		background: none;
		padding: 0;
		&:hover {
			background: none;
		}
	}
}

.playlist {
	flex: 1;
	overflow-y: auto;
	padding: 0.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.playlist-remove {
	background: none;
	color: var(--text-color);
	margin-left: 0.5rem;
}

.playlist-item {
	padding: 0.5rem;
	background-color: var(--color-c);
	border-radius: 4px;
	border-width: 0;
	border-color: var(--color-d);
	display: flex;
	justify-content: space-between;
	align-items: center;

	div {
		display: flex;
		align-items: center;
	}

	span {
		flex-grow: 1;
	}

	&.active {
		background-color: var(--color-c-highlight);
		font-weight: bold;
	}

	&:not(.drop-target-top-border):not(.drop-target-bottom-border):hover {
		background-color: var(--color-c-highlight);
	}
}

.playlist-drag-btn {
	margin-right: 1rem;
	cursor: grab;
}

.playlist-item.drop-target-top-border,
.playlist-item.drop-target-bottom-border {
	border-style: solid;
}

.playlist-item.drop-target-top-border {
	border-top-width: 2px;
}

.playlist-item.drop-target-bottom-border {
	border-bottom-width: 2px;
}

.drop-area-end {
	flex-grow: 1;
	min-height: 2rem;
}