.playlist-container {
	display: flex;
	flex-grow: 1;
	flex-basis: 0;
	flex-direction: column;
	.save-dialog {
		max-width: 300px;
		.save-buttons {
			display: flex;
			gap: 0.5rem;
			justify-content: end;
		}
	}
}

.playlist-header {
	display: flex;
	gap: 1.5rem;
	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-item {
	padding: 0.5rem;
	background-color: var(--color-c);
	display: flex;
	align-items: center;
	gap: 1.5rem;

	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 {
	cursor: grab;
	height: 100%;
}

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