#player {
	display: flex;
	flex-direction: row;

	.art img { vertical-align: top; }
	.info { 
		flex-grow: 1;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	&:not([data-state=play]) .pause { display: none; }
	&[data-state=play] .play { display: none; }
	&:not([data-flags~=random]) .random, &:not([data-flags~=repeat]) .repeat { opacity: 0.5; }

	.icon {
		width: 64px;
	}

	.misc {
		display: flex;
		flex-direction: column;
		@size: 96px / 2;
		width: @size;
		.icon { width: @size; }
	}

}