/* Prettified by Source 2 Viewer 11.1.0.0 - https://valveresourceformat.github.io */

@define dark_carnival: #ffcc33;
DOTAUIEconSetPreviewAnimationControls
{
	flow-children: down;
	horizontal-align: center width: fit-children;
	height: fit-children;
	margin: 8px;
}

#PreviewAnimationList
{
	flow-children: right;
	horizontal-align: center;
	vertical-align: center;
	width: fit-children;
	height: fit-children;
}

.AnimButton
{
	width: 24px;
	height: 24px;
	border-radius: 50%;
}

.AnimButton .AnimButtonBorder
{
	border: 0px;
}

.AnimButton .AnimButtonPlay
{
	horizontal-align: center;
	vertical-align: center;
	width: 18px;
	height: 18px;
	background-color: #00000066;
	border-radius: 50%;
}

.AnimButton .AnimButtonPlay .AnimButtonIconBorder
{
	horizontal-align: center;
	vertical-align: center;
	width: 18px;
	height: 18px;
	border: 1px solid #CC9E6533;
	border-radius: 50%;
}

.AnimButton .AnimButtonPlay .AnimButtonIcon
{
	horizontal-align: center;
	vertical-align: center;
	width: 8px;
	height: 8px;
	background-image: url("s2r://panorama/images/control_icons/play.vsvg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 8px;
	background-texture-size: 8px;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #99774D ), to( #59462E ) );
}

.AnimButton:hover .AnimButtonPlay
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #FFD49E ), to( #99774D ) );
	box-shadow: 0px 2px 8px 1px #00000066;
}

.AnimButton:hover .AnimButtonIconBorder
{
	horizontal-align: center;
	vertical-align: center;
	width: 18px;
	height: 18px;
	border: 1px solid white;
	border-radius: 50%;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #ffe4c3 ), to( #59462E ) );
}

.AnimButton:hover .AnimButtonIcon
{
	brightness: 0;
}

.AnimButton.Playing
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #999999 ), to( #595959 ) );
	box-shadow: 0px 2px 8px 1px #00000066;
}

.AnimButton.Playing.Dark_Carnival
{
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #99774D ), to( #59462E ) );
}

.AnimButton.Playing .AnimButtonBorder
{
	horizontal-align: center;
	vertical-align: center;
	width: 24px;
	height: 24px;
	border: 1px solid white;
	border-radius: 50%;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #CC9E65 ), to( #4D3C26 ) );
}

.AnimButton.Playing .AnimButtonPlay
{
	horizontal-align: center;
	vertical-align: center;
	width: 18px;
	height: 18px;
	background-color: #000000;
	border-radius: 50%;
}

.AnimButton.Playing .AnimButtonPlay .AnimButtonIconBorder
{
	horizontal-align: center;
	vertical-align: center;
	width: 18px;
	height: 18px;
	border: 1px solid white;
	border-radius: 50%;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #4D3C26 ), to( #CC9E65 ) );
}

.AnimButton.Playing .AnimButtonPlay .AnimButtonIcon
{
	horizontal-align: center;
	vertical-align: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background-color: white;
	opacity-brush: gradient( linear, 0% 0%, 0% 100%, from( #FFD49E ), to( #99774D ) );
}

.AnimButton.Playing:hover .AnimButtonPlay
{
	box-shadow: none;
}

.AnimButton.Playing:hover .AnimButtonIcon
{
	brightness: 1;
}

.AnimPreviewText
{
	margin-bottom: 4px;
	font-size: 12px;
	color: #ffffff33;
	opacity: 0;
	transition-property: opacity;
	transition-duration: 0.2s;
}

.PlayingSomething .AnimPreviewText
{
	opacity: 1;
	transition-duration: 0.9s;
}

.HoveringSomething .AnimPreviewText
{
	opacity: 1;
}