<?xml version="1.0" encoding="utf-8"?>
<SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns="library://ns.adobe.com/flex/spark">
  
    <fx:Declarations>
      <AnimateColor id="colorEffect" targets="{innerBorderColorTop, innerBorderColorTop, fillColorTop, fillColorBottom, labelElement]}" duration="1000"/>
    </fx:Declarations>
    
  <states>
    <State name="up"/>
    <State name="over"/>
    <State name="down"/>
  </states>
  
  <transitions>
    <Transition fromState="up" toState="over" effect="{colorEffect}"/>
    <Transition fromState="over" toState="up" effect="{colorEffect}"/>
    <Transition fromState="down" toState="up" effect="{colorEffect}"/>
    <Transition fromState="down" toState="over" effect="{colorEffect}"/>
  </transitions>
    
  <Rect id="r1" radiusX="2" radiusY="2" width="100%" height="100%">
    <fill>
      <LinearGradient rotation="90">
              <entries>
          <GradientEntry id="innerBorderColorTop" color="0x141414" color.down="0x0b0b0b" ratio="0" alpha="1"/>
                <GradientEntry id="innerBorderColorBottom" color="0x0b0b0b" color.down="0x0b0b0b" ratio="1" alpha="1"/>
                </entries>
      </LinearGradient>
    </fill>
    <stroke>
        <SolidColorStroke alpha="1" color="0x252525" pixelHinting="true"/>
    </stroke>
    </Rect>
    
  <Rect radiusX="2" radiusY="2" width="{r1.width - 3}" height="{r1.height - 3}" x="2" y="2">
    <fill>
      <LinearGradient rotation="90">
        <GradientEntry id="fillColorTop" color="0x393939" color.over="0x161616" color.down="0x0b0b0b" ratio="0" alpha="1"/>
        <GradientEntry id="fillColorBottom" color="0x131313" color.over="0x161616" color.down="0x0b0b0b" ratio="1" alpha="1"/>
      </LinearGradient>
    </fill>      
    </Rect>
    
    <SimpleText id="labelElement" color="#bbbbbb" color.over="#dddddd" color.down="#dddddd" verticalCenter="0" horizontalCenter="0"/>

</SparkSkin>