@define currententrytrackcolor: #fefefe;
@define currententrydotcolor: #595850;
@define currententryartistcolor: #698dc6;
@define titlebarbackgroundcolor: #20334c;



#PlaylistList
{
	width: 100%;
	flow-children: down;
	overflow: squish scroll;
	height: 580px; 	

	opacity-mask-scroll-up: url( "file://{images}/friends/friends_list_mask_fade_top.png" );
	opacity-mask-scroll-down: url( "file://{images}/friends/friends_list_mask_fade_bottom.png" );
	opacity-mask-scroll-up-down: url( "file://{images}/friends/friends_list_mask_fade_both.png" );
}


MusicPlaylistSelectionEntry
{
	width: 100%;
	padding: 6px 8px;
	box-shadow: #eeeeee00 0px 0px 16px 0px;
	border: 5px solid;
	height: 53px;
	color: tcexitrow;
	margin-left: 10px;
	margin-right: 16px;

	transition-property: border, blur, background-color, color, transform, box-shadow;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;

	visibility: visible;


}

MusicPlaylistSelectionEntry Label
{
	horizontal-align: left;
	color: applabel;
	transform: translatex(0px);
	padding-left: 0px;
	transition-property: color, position, transform;
	transition-duration: 0.25s;
	transition-timing-function: bigpicture-ease-in-out;
	font-size: deffontsize;
	line-height: 30px;
	font-family: platformfont;
	font-weight: bold;
	text-overflow: clip;
	max-height: 40px;

}

MusicPlaylistSelectionEntry:focus Label
{
	horizontal-align: left;
	color: #171717f5;
	transform: translatex(7px);
	padding-left: 0px;
	padding-right: 14px;
}

MusicPlaylistSelectionEntry.CurrentEntry
{
	background-color: simplebutton;	
}


MusicPlaylistSelectionEntry:hover
{
	transition-duration: 0.23s !immediate;

	color: tcexitrowhover;
	box-shadow: #eeeeee60 -5px -5px 6px 10px;
}



MusicPlaylistSelectionEntry:focus
{
	transition-duration: 0.25s !immediate;

	border-width: 5px;
	border-style: solid;
	border-color: #fdfefef0;
	color: tcexitrowfocus;

	background-color: gradient( linear, -15% 0%, 100% 0%, from( #fdfdfdff ), to( #bdbfbfff ) );

	// Remove border, so we dont transition border out on focus lost, that looks weird.
	transition-property: blur, background-color, color, transform;

	transform: translatez( 0px );
	box-shadow: box_shadow_on_color -4.5px -4.5px 16px 9px;

	animation-name: main-button-glow-movement;
	animation-duration: 1.7s;
	animation-delay: 0.4s;
	animation-timing-function: bigpicture-ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: normal;
}





MusicPlaylistSelectionEntry.CurrentEntry Label, MusicPlaylistSelectionEntry.CurrentEntry:focus Label
{
	color: messagecolorwashfade;
	width: 520px;

}



MusicPlaylistSelectionEntry.CurrentEntry .TrackTime, MusicPlaylistSelectionEntry.CurrentEntry:focus .TrackTime
{
	visibility: visible;
	horizontal-align: right;
	width: 80px;

}

MusicPlaylistSelectionEntry.CurrentEntry:focus .TrackTime
{
	color: applabelselected;
}


MusicPlaylistSelectionEntry .TrackCompositeTitle
{
	width: 600px;
	height: 32px;
	color: applabel;
}

MusicPlaylistSelectionEntry:focus .TrackCompositeTitle
{
	width: 600px;
	height: 32px;
	color: applabelselected;
}