#controls {
	text-align: center;
	flex: 0 0 @base;
	
	display: flex;
	flex-direction: row;
	
	section {
		flex-basis: @base;

		@media (max-width: 380px) {
			&:not(#main) { display:none; }
		}
	}
	
	#albumart {
		background-size: contain;
		background-position: 50% 50%;
		background-repeat: no-repeat;
	}
	
	#main {
		flex: 1;

		button {
			line-height: @base;
			font-size: 40px;
			width: 1.5em;
			vertical-align: middle;
		}

		[data-command='player:play'], [data-command='player:pause'] {
			font-size: 50px;

			&:disabled { display: none; }
		}
	}

	#misc button {
		float: right;
		clear: right;
		margin-right: 4px;
		margin-top: 3px;
		font-size: 18px;
		
		&::after {
			content: "•";
			margin-left: 0.2em;
			color: #888;
		}
		
		&.on::after {
			color: #5af;
			text-shadow: 0 0 3px #fff;
		}
		
		sub {
			font-size: 60%;
			font-family: @font; /* FontAwesome has weird 1ch */
			display: inline-block;
			
			&:not(:empty) {
				width: 1ch;
			}
		}
	}
}
