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

DOTAAghanimUpgradePicker
{
	flow-children: down;
	horizontal-align: center;
	vertical-align: bottom;
	margin-bottom: 180px;
	background-color: gradient( radial, 0% 0%, 0% 0%, 100% 100%, from( #182229 ), to( #0d1317 ) );
	opacity: 0.0;
	transform: translateY( 28px ) scale3d( 0.96, 0.96, 1 );
	transition-property: opacity, transform;
	transition-duration: 0.1s;
	transition-timing-function: cubic-bezier(0, 0.9, 0, 0.9);
	transition-delay: 0s;
	z-index: 9;
}

DOTAAghanimUpgradePicker.ShowPicker
{
	opacity: 1.0;
	transform: none;
	transition-timing-function: ease-in;
}

.TooltipContents
{
	width: fit-children;
	flow-children: down;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #13171a ), to( #0b0f11 ) );
	border: 2px solid black;
	box-shadow: 0px 8px 40px -2px rgba(0, 0, 0, 0.6);
}

.Header
{
	width: 100%;
	background-color: gradient( linear, 0% 0%, 100% 0%, from( #608dff03 ), color-stop( 0.5, #53afff3a ), to( #608dff03 ) );
}

.Header .HeaderBackgroundTexture
{
	background-image: url("s2r://panorama/images/hud/facets/ripple_texture_png.vtex");
	width: 100%;
	height: 100%;
	background-size: cover;
	ignore-parent-flow: true;
	opacity-brush: gradient( linear, 0% 0%, 100% 0%, from( #ffffff ), to( #ffffff00 ) );
	-s2-mix-blend-mode: screen;
	opacity: 0.1;
	wash-color: rgb(161, 203, 255);
}

.Header .HeaderText
{
	horizontal-align: center;
	vertical-align: center;
	flow-children: right;
	padding: 8px;
	text-align: center;
	x: -4px;
}

.Header .HeaderText .AghsScepterIcon
{
	vertical-align: center;
	height: 36px;
	margin: -8px 4px;
	visibility: collapse;
}

.IsScepter .Header .HeaderText .AghsScepterIcon
{
	visibility: visible;
}

.Header .HeaderText .AghsShardIcon
{
	vertical-align: center;
	height: 24px;
	margin: -8px 4px;
	transform: translateY( 1px );
	visibility: collapse;
}

.IsShard .Header .HeaderText .AghsShardIcon
{
	visibility: visible;
}

.Header .HeaderText .Title
{
	font-size: 20px;
	font-weight: semi-bold;
	color: gradient( linear, 0% 0%, 120% 0%, from( #7ad5ff ), to( #789aff ) );
	text-shadow: 0px 1px 8px #000000;
	vertical-align: center;
	horizontal-align: center;
}

.Header #CloseButton
{
	vertical-align: center;
	horizontal-align: right;
	margin: 4px 8px;
	border-radius: 50%;
	background-color: rgba(138, 183, 255, 0.05);
	border: 1px solid rgba(187, 224, 255, 0.05);
	padding: 6px;
	transition-property: background-color, border, transform;
	transition-duration: 0.1s;
}

.Header #CloseButton .CloseIcon
{
	margin: 0px;
	height: 14px;
	width: 14px;
	horizontal-align: center;
	vertical-align: center;
	opacity: 0.7;
	transition-property: opacity;
	transition-duration: 0.1s;
}

.Header #CloseButton:hover
{
	background-color: rgba(138, 183, 255, 0.1);
	border: 1px solid rgba(187, 224, 255, 0.1);
}

.Header #CloseButton:active
{
	transform: scale3d( 0.9, 0.9, 1 );
}

.HeaderDash
{
	width: 100%;
	height: 1px;
	background-color: rgba(0, 0, 0, 0.15);
	box-shadow: 0px -1px 0px rgba(255, 255, 255, 0.01);
}

.Body
{
	flow-children: down;
	width: fit-children;
	border: 2px solid black;
}

.BottomArrow
{
	width: 36px;
	height: width-percentage( 50% );
	background-image: url("s2r://panorama/images/tooltips/tooltip_arrow.vsvg");
	background-texture-size: 72px 36px;
	background-size: cover;
	wash-color: #12181C;
	margin-top: -2px;
	horizontal-align: center;
	z-index: 1;
	visibility: collapse;
}

.UpgradeContainer
{
	flow-children: right;
	width: fit-children;
}

#UpgradeList
{
	flow-children: right;
	padding: 2px;
}

.AghDescriptionButton
{
	margin: 3px;
	flow-children: none;
	transition-property: transform, brightness;
	transition-duration: 0.05s;
}

.AghDescriptionButton .UpgradeOptionBackground
{
	width: 100%;
	height: 100%;
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #1b2938 ), to( #141b23 ) );
	border: 1px solid rgba(182, 221, 255, 0.03);
	box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.3);
	transition-property: background-color, border;
	transition-duration: 0.1s;
}

.AghDescriptionButton .UpgradeOptionShimmer
{
	width: 100%;
	height: 100%;
	wash-color: rgb(255, 219, 174);
	opacity: 0.07;
}

.AghDescriptionButton DOTAAghsDescription
{
	transition-property: brightness;
	transition-duration: 0.1s;
}

.AghDescriptionButton .RadioBox
{
	visibility: collapse;
}

.AghDescriptionButton:hover .UpgradeOptionBackground
{
	border: 1px solid rgba(211, 234, 255, 0.5);
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #243547 ), to( #19222c ) );
}

.AghDescriptionButton:hover DOTAAghsDescription
{
	brightness: 1.25;
}

.AghDescriptionButton:active
{
	transform: scale3d( 0.98, 0.98, 1 );
	brightness: 0.6;
}

.AghDescriptionButton:selected
{
	z-index: 1;
	animation-name: BounceUpgrade;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;
}

.AghDescriptionButton:selected .UpgradeOptionBackground
{
	border: 1.5px solid rgb(255, 235, 169);
	background-color: gradient( linear, 0% 0%, 0% 100%, from( #36342c ), to( #1f1e1c ) );
	box-shadow: inset 0px 0px 48px -16px rgba(255, 217, 134, 0.05);
}

.AghDescriptionButton:selected DOTAAghsDescription
{
	brightness: 1.25;
}

.AghDescriptionButton:selected .UpgradeOptionShimmer
{
	animation-name: Shimmer;
	animation-duration: 0.4s;
	animation-timing-function: ease-out;
}

@keyframes 'Shimmer'
{
	0%
	{
		background-color: gradient( linear, -50% -50%, 0% 0%, from( #FFFFFF00 ), color-stop( 0.5, #FFFFFF ), to( #FFFFFF00 ) );
	}
	
	100%
	{
		background-color: gradient( linear, 100% 100%, 150% 150%, from( #FFFFFF00 ), color-stop( 0.5, #FFFFFF ), to( #FFFFFF00 ) );
	}
	
}

@keyframes 'BounceUpgrade'
{
	0%
	{
		transform: scale3d( 0.98, 0.98, 1 );
	}
	
	30%
	{
		transform: scale3d( 1.02, 1.02, 1 );
	}
	
	100%
	{
		transform: none;
	}
	
}

.ConfirmContainer
{
	width: 100%;
}

.ConfirmContainer #ConfirmButton
{
	margin: 6px 0px 10px;
	horizontal-align: center;
	vertical-align: center;
	padding-left: 56px;
	padding-right: 56px;
	hue-rotation: 5deg;
	animation-name: GlowButtonPrimary;
	animation-duration: 0.6s;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
}

.ConfirmContainer #ConfirmButton Label
{
	text-shadow: 0px 1px 1px rgba(255, 242, 212, 0.2);
	font-weight: bold;
	color: rgb(47, 31, 19);
}

.ConfirmContainer #ConfirmButton:disabled
{
	opacity: 0.2;
	animation-name: none;
}

@keyframes 'GlowButtonPrimary'
{
	0%
	{
		box-shadow: 0px 0px 24px #FFC77D00;
		brightness: 1;
	}
	
	100%
	{
		box-shadow: 0px 0px 32px #FFC77D11;
		brightness: 2;
	}
	
}

@define OptionHeight: 54px;