<?xml version="1.0" encoding="utf-8"?>
<Skin xmlns="http://ns.adobe.com/mxml/2009" xmlns:gumbo="library:adobe/flex/gumbo" xmlns:filters="flex.filters.*" xmlns:mx="library:adobe/flex/halo">
    <Metadata>
        [HostComponent("flex.component.Button")]
    </Metadata>
    
    <states>
        <State name="over"/>
        <State name="up"/>
        <State name="down"/>
        <State name="disabled"/>
    </states>
    
    <transitions>
        <mx:Transition fromState="up" toState="over">
            <gumbo:Fade target="{shadow}" duration="200"/>
        </mx:Transition>
        <mx:Transition fromState="over" toState="up">
            <gumbo:Fade target="{shadow}" duration="200"/>
        </mx:Transition>
    </transitions>
    
    <!-- Button fill -->
    <gumbo:Group>
        <gumbo:Rect radiusX="12" radiusY="12" width="{hostComponent.width}" height="{hostComponent.height}" >
            <gumbo:fill>
                <gumbo:SolidColor color="#FF0000" />
           </gumbo:fill>
        </gumbo:Rect>
        <gumbo:filters>
            <DropShadowFilter blurX="3" blurY="3" distance="3" angle="90" alpha="0.4"/>
        </gumbo:filters>
    </gumbo:Group>
    
    <!-- Button highlight/shadow -->
    <gumbo:Group>
        <gumbo:Rect radiusX="12" radiusY="12" width="{hostComponent.width}" height="{hostComponent.height}" id="shadow" alpha="0.3" alpha.over="0.7">
            <gumbo:fill>
                <LinearGradient  rotation="-90" >
                       <GradientEntry ratio="0" alpha="0.4" color="#000000"/>
                       <GradientEntry ratio="1" alpha="0.7" color="#000000"/>
              </LinearGradient>
           </gumbo:fill>
        </gumbo:Rect>
        <gumbo:Rect radiusX="7" radiusY="7" width="{hostComponent.width - 10}" height="{hostComponent.height/2}" x="6" y="1" >
            <gumbo:fill>
                <LinearGradient  rotation="90" >
                       <GradientEntry ratio="0" alpha="0.7" color="#FFFFFF"/>
                       <GradientEntry ratio="0.2" alpha="0.43" color="#FFFFFF"/>
                       <GradientEntry ratio="1" alpha="0" color="#FFFFFF"/>
              </LinearGradient>
           </gumbo:fill>
        </gumbo:Rect>
    </gumbo:Group>
    
    <!-- Text -->
    <gumbo:Group verticalCenter="0" horizontalCenter="0">
        <TextGraphic color="#FFFFFF" text="{hostComponent.label}" y.down="2" lineBreak="true" width="50"/>
        <gumbo:filters>
            <GlowFilter blurX="4" blurY="4" alpha="0.9" color="#000000"/>
        </gumbo:filters>
    </gumbo:Group>
</Skin>