<?xml version="1.0" encoding="utf-8"?>

<GraphicBorderSkin 
    
    xmlns:mx="http://www.adobe.com/2006/mxml"  
    xmlns="http://www.degrafa.com/2007" 
    >
            
    <states>
        
        <!-- NORMAL STATES -->
        
        <State name="overSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillOver}" />
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeOver}" />
        </State>
        
        <State name="downSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillDown}"/>
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeDown}" />
        </State>
        
        <State name="disabledSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillDisabled}"/>
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeDisabled}" />
        </State>
        
        
        <!-- SELECTED STATES -->
        
        <State name="selectedUpSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillSelectedUp}" />
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeSelectedUp}" />
        </State>
        
        <State name="selectedOverSkin" basedOn="selectedUpSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillSelectedUp}" />
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeSelectedUp}" />
        </State>
        
        <State name="selectedDownSkin" basedOn="selectedUpSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillSelectedUp}" />
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeSelectedUp}" />
        </State>
        
        <State name="selectedDisabledSkin" basedOn="selectedUpSkin">
            <SetProperty target="{rectBackground}" name="fill" value="{faceFillSelectedUp}" />
            <SetProperty target="{rectStroke}" name="stroke" value="{faceStrokeSelectedUp}" />
        </State>
        
        
    </states>
    
    <fills>
    
        <LinearGradientFill id="faceFillUp" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#d9d9d9"/>
            <GradientStop ratio="1" alpha="1" color="#bcbcbc"/>
        </LinearGradientFill>
        
        <LinearGradientFill id="faceFillOver" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#d9d9d9"/>
            <GradientStop ratio="1" alpha="1" color="#bcbcbc"/>
        </LinearGradientFill>
        
        <LinearGradientFill id="faceFillDown" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#d9d9d9"/>
            <GradientStop ratio="1" alpha="1" color="#bcbcbc"/>
        </LinearGradientFill>
        
        <LinearGradientFill id="faceFillDisabled" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#ebebeb"/>
            <GradientStop ratio="1" alpha="1" color="#d4d4d4"/>
        </LinearGradientFill>
        
        <LinearGradientFill id="faceFillSelectedUp" angle="90" >
            <GradientStop ratio="0" alpha="1" color="#464646" />
            <GradientStop ratio="1" alpha="1" color="#656565" />
        </LinearGradientFill>
        
    </fills>
    
    <strokes>
        
        <LinearGradientStroke id="faceStrokeUp" angle="90"  weight="1" joints="round" pixelHinting="true">
            <GradientStop ratio="0" alpha="1" color="#c1c1c1"/>
            <GradientStop ratio="1" alpha="1" color="#a1a1a1"/>
        </LinearGradientStroke>
        
        <LinearGradientStroke id="faceStrokeOver" angle="90"  weight="1" joints="round" pixelHinting="true" >
            <GradientStop ratio="0" alpha="1" color="#353535"/>
            <GradientStop ratio="1" alpha="1" color="#131313"/>
        </LinearGradientStroke>
        
        <LinearGradientStroke id="faceStrokeDown" angle="90"  weight="1" joints="round" pixelHinting="true" >
            <GradientStop ratio="0" alpha="1" color="#c1c1c1"/>
            <GradientStop ratio="1" alpha="1" color="#a1a1a1"/>
        </LinearGradientStroke>
        
        <LinearGradientStroke id="faceStrokeDisabled" angle="90"  weight="1" joints="round" pixelHinting="true" >
            <GradientStop ratio="0" alpha="1" color="#e0e0e0"/>
            <GradientStop ratio="1" alpha="1" color="#b8b8b8"/>
        </LinearGradientStroke>
        
        <LinearGradientStroke id="faceStrokeSelectedUp" angle="90"  weight="1" joints="round" pixelHinting="true">
            <GradientStop ratio="0" alpha="1" color="#111111"/>
            <GradientStop ratio="1" alpha="1" color="#333333"/>
        </LinearGradientStroke>
        
    </strokes>
    
    <geometry>
        
        <!-- NOTE: We're going to draw the lines around the rect as a path as the RoundedRect doesn't render adequately -->
        
        <RegularRectangle
            
            id="rectBackground" 
            height="{skinHeight-1}" 
            width="{skinWidth-1}"
            x="1"
            y="1"
            fill="{faceFillUp}" 
            />
        
        <Path 
            id="rectStroke"
            stroke="{faceStrokeUp}"
            >
            
            <!-- TOP -->
            <MoveTo x="1" y="0" />
            <LineTo x="{skinWidth-1}" y="0" />
            
            <!-- RIGHT -->
            <MoveTo x="{skinWidth}" y="1" />
            <LineTo x="{skinWidth}" y="{skinHeight-1}" />
            
            <!-- BOTTOM -->
            <MoveTo x="{skinWidth-1}" y="{skinHeight}" />
            <LineTo x="1" y="{skinHeight}" />
            
            <!-- LEFT -->
            <MoveTo x="0" y="{skinHeight-1}" />
            <LineTo x="0" y="1" />
            
        </Path>
        
    </geometry>
    
</GraphicBorderSkin>