                                                                               
                                                                               
                                                                               


                                                                       
                                                               
@define CrosshairPanelOffset: translate3d( 0.5px, 0.5px, 0px );

@define cppPipDefaultOffset: 7;                                                                          
                                                                                               
                                                      

@define cppBlackPipDefaultOffset: 2;                                                               
                                                     

@define cppArcDefaultOffset: 4.0;                                                             
                                                                                                                                            
                                                             


@define arcSize: 9px;
@define crosshairGreenColor: #82b116;
@define crosshairEnemyColor: #c93121;
@define crosshairColor1: #82b116;
@define crosshairColor2: #ffcc00;
@define crosshairColor3: #00ffff;
@define crosshairColor4: #96ffff;

.crosshair
{
	width: 100%;
	height: 100%;
	
	transform: CrosshairPanelOffset;
}

.crosshair--hidden
{
	visibility: collapse;
}

                                          

.crosshair__pip
{
	horizontal-align: center_nopixelsnap;
	vertical-align: center_nopixelsnap;
	overflow: noclip;	                                                                             
						                                                                                                 
}

.crosshair--piphidden .crosshair__pip
{
	visibility: collapse;
}

.crosshair__pip--green
{
    -s2-mix-blend-mode: SRGBadditive;
	opacity: 0.99;
}

.crosshair__pip--black
{
	wash-color-fast: #000000AA;
}

                                          

.crosshair__arc
{
	horizontal-align: center_nopixelsnap;
	vertical-align: center_nopixelsnap;
    -s2-mix-blend-mode: SRGBadditive;
	overflow: noclip;	                                                                             
						                                                                                                 
}

.crosshair--archidden .crosshair__arc
{
	visibility: collapse;
}

.crosshair__arc--horizontal
{
	width: arcSize;
	height: 1px;
}

.crosshair__arc--vertical
{
	width: 1px;
	height: arcSize;
}

                                         

.crosshair__dot
{
	width: 1px;
	height: 1px;

                   

	horizontal-align: center_nopixelsnap;
	vertical-align: center_nopixelsnap;
	overflow: noclip;	                                                                             
						                                                                                                 
	
	wash-color-fast: crosshairGreenColor;
    -s2-mix-blend-mode: SRGBadditive;
}

.crosshair--dothidden .crosshair__dot
{
	visibility: collapse;
}

                                                  

.crosshair__blackcircle
{
	horizontal-align: center_nopixelsnap;
	vertical-align: center_nopixelsnap;
	overflow: noclip;	                                                                             
						                                                                                                 

	wash-color-fast: #00000088;
	width: 7px;
	height: 7px;
}

.crosshair--dothidden .crosshair__blackcircle
{
	visibility: collapse;
}
                                           

.crosshair--enemy .crosshair__dot,
.crosshair--enemy .crosshair__arc
{
	background-color: crosshairEnemyColor;
}
.crosshair--enemy .crosshair__friend,
.crosshair--enemy .crosshair__pip--green
{
	wash-color-fast: crosshairEnemyColor;
}
                     
.crosshair--color1 .crosshair__dot,
.crosshair--color1 .crosshair__arc
{
	background-color: crosshairColor1;
}
                                            
.crosshair--color1 .crosshair__pip--green
{
	wash-color-fast: crosshairColor1;
}
                     
.crosshair--color2 .crosshair__dot,
.crosshair--color2 .crosshair__arc
{
	background-color: crosshairColor2;
}
                                            
.crosshair--color2 .crosshair__pip--green
{
	wash-color-fast: crosshairColor2;
}
                     
.crosshair--color3 .crosshair__dot,
.crosshair--color3 .crosshair__arc
{
	background-color: crosshairColor3;
}
                                            
.crosshair--color3 .crosshair__pip--green
{
	wash-color-fast: crosshairColor3;
}
                    
.crosshair--color4 .crosshair__dot,
.crosshair--color4 .crosshair__arc
{
	background-color: crosshairColor4;
}
                                            
.crosshair--color4 .crosshair__pip--green
{
	wash-color-fast: crosshairColor4;
}

.crosshair-preview-crontrols
{
	width: 100%;
	height: 32px;
	vertical-align: bottom;
}

.xhair-ctrl-btn
{
	width: fit-children;
	height: 32px;
	background-color: gradient( linear, 0% 0%, 0% 100%, from(#000000aa), to( #00000088) );
	margin: 2px 2px 2px 2px;
	padding-left: 4px;
	padding-right: 4px;
}
.xhair-ctrl-btn__img
{
	width: 32px;
	height:32px;
}
.xhair-ctrl-btn > Label
{
	font-size: 14px;
	margin: 12px 8px 8px;
}

.dynamic-xhair-buttons
{
	visibility: collapse;
}