                                              

                                                         
                                     
@define damageIndicatorSize: 300px;

.Damage
{
	width: damageIndicatorSize;
	height: damageIndicatorSize;
	horizontal-align: center;
	vertical-align: center;
}

.Damage--Hidden
{
	visibility: collapse;
}

.Damage__Segment
{
	width: 100%;
	height: 100%;
	vertical-align: top;
	
	background-color: gradient( radial, 50% 50%, 0% 1%, 49% 49%,
	from( #FFFFFF00 ),
	color-stop(0.861, #FFFFFF00),
	color-stop(0.862, #FFFFFFFF),
	color-stop(0.889, #FFFFFFFF),
	color-stop(0.890, #FFFFFF00),
	color-stop(0.919, #FFFFFF00),
	color-stop(0.920, #FFFFFFFF),
	color-stop(0.999, #FFFFFFFF),
	to( #FFFFFF00 ) );
	
	clip: radial( 50% 50%, 45deg, 270deg );
	
	wash-color: #cc3300FF;
	
	-s2-mix-blend-mode: additive;
}

.Damage__Segment_Bar
{
	width: 100%;
	height: 100%;
	vertical-align: top;
	
	background-color: gradient( radial, 50% 50%, 0% 1%, 57% 57%,
	from( #FFFFFF00 ),
	color-stop(0.769, #FFFFFF00),
	color-stop(0.770, #FFFFFFFF),
	color-stop(0.899, #FFFFFFFF),
	color-stop(0.900, #FFFFFF00),
	to( #FFFFFF00 ) );
	
	clip: radial( 50% 50%, -45deg, 90deg );
}

.Damage__Segment--Top
{
	transform: translate3d( 0px, -5px, 0px );
}

.Damage__Segment--Right
{
	transform: translate3d( 0px, -5px, 0px ) rotateZ( 90deg );
}

.Damage__Segment--Bottom
{
	transform: translate3d( 0px, -5px, 0px ) rotateZ( 180deg );
}

.Damage__Segment--Left
{
	transform: translate3d( 0px, -5px, 0px ) rotateZ( 270deg );
}