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

<!--

    ADOBE SYSTEMS INCORPORATED
    Copyright 2009 Adobe Systems Incorporated
    All Rights Reserved.

    NOTICE: Adobe permits you to use, modify, and distribute this file
    in accordance with the terms of the license agreement accompanying it.

-->

<!--- The wireframe skin class for the MX default button. The default button
        is used in containers such as Alert.
        
      @see mx.controls.Alert

      @langversion 3.0
      @playerversion Flash 10
      @playerversion AIR 1.5
      @productversion Flex 4
-->
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
      minWidth="21" minHeight="19" 
      alpha.disabledStates="0.5">

    <fx:Script>
        <![CDATA[
        
            /**
             * @private
             */
            override protected function initializationComplete():void
            {
                useChromeColor = true;
                super.initializationComplete();
            }
        
            /**
             *  @private
             */
            override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number) : void
            {
                var cr:Number = getStyle("cornerRadius");
                
                if (cornerRadius != cr)
                {
                    cornerRadius = cr;
                    shadow.radiusX = cornerRadius;
                    fill.radiusX = cornerRadius;
                    lowlight.radiusX = cornerRadius;
                    highlight.radiusX = cornerRadius;
                    border.radiusX = cornerRadius;
                }
                
                if (highlightStroke) highlightStroke.radiusX = cornerRadius;
                    
                super.updateDisplayList(unscaledWidth, unscaledHeight);
            }
            
            private var cornerRadius:Number = 2;

        ]]>
    </fx:Script>
    
    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" stateGroups="overStates" />
        <s:State name="down" stateGroups="downStates" />
        <s:State name="disabled" stateGroups="disabledStates" />
        <s:State name="selectedUp" stateGroups="selectedStates, selectedUpStates" />
        <s:State name="selectedOver" stateGroups="overStates, selectedStates" />
        <s:State name="selectedDown" stateGroups="downStates, selectedStates" />
        <s:State name="selectedDisabled" stateGroups="selectedUpStates, disabledStates, selectedStates" />
    </s:states>
    
    <!-- layer 1: shadow -->
    <!--- @private -->
    <s:Rect id="shadow" left="-1" right="-1" top="-1" bottom="-1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                    <s:GradientEntry color="#000000" 
                                   color.downStates="#FFFFFF"
                                   alpha="0.01"
                                   alpha.downStates="0" />
                    <s:GradientEntry color="#000000" 
                                   color.downStates="#FFFFFF" 
                                   alpha="0.07"
                                   alpha.downStates="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <!--- @private -->
    <s:Rect id="fill" left="1" right="1" top="1" bottom="1" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#CCCCCC" 
                               color.selectedUpStates="#A9A9A9"
                               color.overStates="#A9A9A9" 
                               color.downStates="#A9A9A9" 
                               alpha="0.85" 
                               alpha.selectedOver="1" />
                <s:GradientEntry color="#A9A9A9" 
                               color.selectedUpStates="#A9A9A9"
                               color.over="#A9A9A9" 
                               color.selectedOver="#A9A9A9"
                               color.downStates="#A9A9A9" 
                               alpha="0.85"
                               alpha.selectedOver="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 3: fill lowlight -->
    <!--- @private -->
    <s:Rect id="lowlight" left="1" right="1" bottom="1" height="9" radiusX="2">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="#000000" alpha="0.0099" />
                <s:GradientEntry color="#000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <!--- @private -->
    <s:Rect id="highlight" left="1" right="1" top="1" height="9" radiusX="2">
        <s:fill>
            <s:SolidColor color="#FFFFFF" 
                        alpha="0.33" 
                        alpha.selectedUpStates="0.22"
                        alpha.overStates="0.22" 
                        alpha.downStates="0.12" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <!--- @private -->
    <s:Rect id="highlightStroke" left="1" right="1" top="1" bottom="1" radiusX="2" excludeFrom="downStates">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="#EEEEEE" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
                <s:GradientEntry color="#A9A9A9" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    <!-- layer 6: highlight stroke (down state only) -->
    <s:Rect left="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="#000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect right="1" top="1" bottom="1" width="1" includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="#000000" alpha="0.07" />
        </s:fill>
    </s:Rect>
    <s:Rect left="2" top="1" right="2" height="1" includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="#000000" alpha="0.25" />
        </s:fill>
    </s:Rect>
    <s:Rect left="1" top="2" right="1" height="1" includeIn="downStates, selectedUpStates, selectedOver">
        <s:fill>
            <s:SolidColor color="#000000" alpha="0.09" />
        </s:fill>
    </s:Rect>
    
    <!-- layer 7: border - put on top of the fill so it doesn't disappear when scale is less than 1 -->
    <!--- @private -->
    <s:Rect id="border" left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="2">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="#000000" 
                               alpha="0.5625"
                               alpha.down="0.6375"
                               alpha.selectedStates="0.6375" />
                <s:GradientEntry color="#000000" 
                               alpha="0.75" 
                               alpha.down="0.85"
                               alpha.selectedStates="0.85" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
</s:SparkSkin>
