<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
         xmlns:s="library://ns.adobe.com/flex/spark" 
         xmlns:mx="library://ns.adobe.com/flex/halo">
    <!--
    /*
    * The contents of this file are subject to the Mozilla Public License Version
    * 1.1 (the "License"); you may not use this file except in compliance with
    * the License. You may obtain a copy of the License at
    * http://www.mozilla.org/MPL/
    *
    * Software distributed under the License is distributed on an "AS IS" basis,
    * WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License
    * for the specific language governing rights and limitations under the
    * License.
    *
    * The Original Code is the Flex4Wizard component.
    *
    * The Initial Developer of the Original Code is
    * Anirudh Sasikumar (http://anirudhs.chaosnet.org/).
    * Portions created by the Initial Developer are Copyright (C) 2008
    * the Initial Developer. All Rights Reserved.
    *
    * Contributor(s):
    *
    */
    -->
    <fx:Script>
        <![CDATA[            
            [Bindable]public var label:String;
        ]]>
    </fx:Script>
    
    <s:states>
        <s:State name="normal"/>
        <s:State name="selected"/>
    </s:states>
    <s:transitions>
        <s:Transition autoReverse="true">
            <s:AnimateColor targets="{[shadowRect,shadowRect1, fillRect]}" duration="800" />
        </s:Transition>
    </s:transitions>
    
    <!-- layer 1: shadow -->
    <s:Rect  left="-1" right="-1" top="-1" bottom="-1" radiusX="0" radiusY="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry id="shadowRect" color="0x000000" 
                                 color.selected="0xFFFFFF"
                                 alpha="0.01"
                                 alpha.selected="0" />
                <s:GradientEntry id="shadowRect1" color="0x000000" 
                                 color.selected="0xFFFFFF" 
                                 alpha="0.07"
                                 alpha.selected="0.5" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 2: fill -->
    <s:Rect   left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry 
                    id="fillRect"
                    color="0xFFFFFF" 
                                 color.selected="0x89BDEE"
                                 alpha="0.85" 
                                 alpha.selected="1" 
     
                                 />

            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 3: fill lowlight -->
    <s:Rect left="1" right="1" bottom="1" height="9" radiusX="0" radiusY="0">
        <s:fill>
            <s:LinearGradient rotation="90">
                <s:GradientEntry color="0x000000" alpha="0.0099" />
                <s:GradientEntry color="0x000000" alpha="0.0627" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- layer 4: fill highlight -->
    <s:Rect left="1" right="1" top="1" height="9" radiusX="0" radiusY="0">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                          alpha="0.33" 
                          />
        </s:fill>
    </s:Rect>
    
    <!-- layer 5: highlight stroke (all states except down) -->
    <s:Rect  left="1" right="1" top="1" bottom="1" radiusX="0" radiusY="0" >
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry color="0xFFFFFF"  alpha.selected="0.33" />
                <s:GradientEntry color="0xD8D8D8" alpha.selected="0.33" />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    
    

    
    <s:Rect  left="0" right="0" top="0" bottom="0" width="69" height="20" radiusX="0" radiusY="0">
        <s:stroke>
            <s:LinearGradientStroke rotation="90" weight="1">
                <s:GradientEntry id="borderEntry1" 
                                 alpha="0.5625"
                                 alpha.selected="0.6375"
                                 />
                <s:GradientEntry id="borderEntry2" 
                                 alpha="0.75" 
                                 alpha.selected="0.85"
                                 />
            </s:LinearGradientStroke>
        </s:stroke>
    </s:Rect>
    
    
    <s:Label text="{label}" verticalCenter="0" horizontalCenter="0" paddingLeft="5" paddingRight="5" />
</s:Group>