#playlist {
	position: relative;
	flex: 1;
	
	ol {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		overflow-y: auto;

		margin: 0;
		padding: 0;
		list-style: none;
		counter-reset: playlist;
	}

	li {
		position: relative; /* anchor for button */
		counter-increment: playlist;
		display: block;
		cursor: pointer;
		white-space: nowrap;
		padding: 2px 16px 2px 4px;
		overflow: hidden;
		text-overflow: ellipsis;

		&::before {
			content: counter(playlist, decimal-leading-zero) ". ";
		}

		&:hover {
			background-color: rgba(255, 255, 255, 0.1);
		}

		&.current {
			font-weight: bold;
		}
		
		button {
			position: absolute;
			right: 4px;
			top: 3px;
			display: none;
			font-weight: normal;

			&::before {
				font-family: FontAwesome;
				content: "\f00d";
			}
		}
		
		&:hover:not(.current) button {
			display: initial;
		}
	}

	.analyser {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0.3;

		canvas {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	[data-command='playlist:randomize'] {
		position: absolute;
		font-size: 18px;
		right: 8px;
		bottom: 8px;
	}
}
