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

<!--

  ADOBE SYSTEMS INCORPORATED
  Copyright 2008 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 default skin class for a Spark ToggleButton component.  

   @see spark.components.ToggleButton
    
    @langversion 3.0
    @playerversion Flash 10
    @playerversion AIR 1.5
    @productversion Flex 4
-->
<s:SparkButtonSkin xmlns:fx="http://ns.adobe.com/mxml/2009" 
           xmlns:s="library://ns.adobe.com/flex/spark" 
           xmlns:fb="http://ns.adobe.com/flashbuilder/2009"
           minWidth="21" minHeight="21" 
           alpha.disabledStates="0.5">
  
  <!-- host component -->
  <fx:Metadata>
  <![CDATA[ 
    /** 
     * @copy spark.skins.spark.ApplicationSkin#hostComponent
     */
    [HostComponent("spark.components.ToggleButton")]
  ]]>
  </fx:Metadata>
  
  <!-- 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="upAndSelected" stateGroups="selectedStates, selectedUpStates" />
    <s:State name="overAndSelected" stateGroups="overStates, selectedStates" />
    <s:State name="downAndSelected" stateGroups="downStates, selectedStates" />
    <s:State name="disabledAndSelected" stateGroups="selectedUpStates, disabledStates, selectedStates" />
  </s:states>
  
  <!-- layer 1: shadow -->
  <!--- @private -->
  <s:Rect
    id="shadow"
    left="-1"
    right="-1"
    top="-1"
    bottom="-1"
    bottomLeftRadiusX="15"
    topLeftRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="90">
          <s:GradientEntry color="0x000000" 
                   color.downStates="0xFFFFFF"
                   alpha="0.01"
                   alpha.downStates="0" />
          <s:GradientEntry color="0x000000" 
                   color.downStates="0xFFFFFF" 
                   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"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF" 
                 color.selectedUpStates="0xBBBDBD"
                 color.overStates="0xBBBDBD" 
                 color.downStates="0xAAAAAA" 
                 alpha="0.85" 
                 alpha.overAndSelected="1" />
        <s:GradientEntry color="0xD8D8D8" 
                 color.selectedUpStates="0x9FA0A1"
                 color.over="0x9FA0A1" 
                 color.overAndSelected="0x8E8F90"
                 color.downStates="0x929496" 
                 alpha="0.85"
                 alpha.overAndSelected="1" />
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
  
  <!-- layer 3: fill lowlight -->
  <!--- @private -->
  <s:Rect id="lowlight"
          left="1"
          right="1"
          top="1"
          bottom="1"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="270">
        <s:GradientEntry color="0x000000" ratio="0.0" alpha="0.0627" />
        <s:GradientEntry color="0x000000" ratio="0.48" alpha="0.0099" />
        <s:GradientEntry color="0x000000" ratio="0.48001" alpha="0" />
      </s:LinearGradient>
    </s:fill>
  </s:Rect>
  
  <!-- layer 4: fill highlight -->
  <!--- @private -->
  <s:Rect id="highlight"
          left="1"
          right="1"
          top="1"
          bottom="1"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15">
    <s:fill>
      <s:LinearGradient rotation="90">
        <s:GradientEntry color="0xFFFFFF"
                 ratio="0.0"
                 alpha="0.33" 
                 alpha.selectedUpStates="0.22"
                 alpha.overStates="0.22" 
                 alpha.downStates="0.12"/>
        <s:GradientEntry color="0xFFFFFF"
                 ratio="0.48"
                 alpha="0.33"
                 alpha.selectedUpStates="0.22"
                 alpha.overStates="0.22" 
                 alpha.downStates="0.12"/>
        <s:GradientEntry color="0xFFFFFF"
                 ratio="0.48001"
                 alpha="0" />
      </s:LinearGradient>
    </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"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15"
          excludeFrom="downStates">
    <s:stroke>
      <s:LinearGradientStroke rotation="90" weight="1">
        <s:GradientEntry color="0xFFFFFF" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
        <s:GradientEntry color="0xD8D8D8" alpha.overStates="0.22" alpha.selectedUpStates="0.33" />
      </s:LinearGradientStroke>
    </s:stroke>
  </s:Rect>
  
  <!-- layer 6: highlight stroke (down state only) -->
  <!--- @private -->
  <s:Rect id="hldownstroke1"
          left="1"
          right="1"
          top="1"
          bottom="1"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15"
          includeIn="downStates, selectedUpStates, overAndSelected">
    <s:stroke>
      <s:LinearGradientStroke rotation="90" weight="1">
        <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.0" />
        <s:GradientEntry color="0x000000" alpha="0.25" ratio="0.001" />
        <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.0011" />
        <s:GradientEntry color="0x000000" alpha="0.07" ratio="0.965" />
        <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.9651" />
      </s:LinearGradientStroke>
    </s:stroke>
  </s:Rect>
  <!--- @private -->
  <s:Rect id="hldownstroke2"
          left="2"
          right="2"
          top="2"
          bottom="2"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15"
      includeIn="downStates, selectedUpStates, overAndSelected">
    <s:stroke>
      <s:LinearGradientStroke rotation="90" weight="1">
        <s:GradientEntry color="0x000000" alpha="0.09" ratio="0.0" />
        <s:GradientEntry color="0x000000" alpha="0.00" ratio="0.0001" />
      </s:LinearGradientStroke>
    </s:stroke>
  </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"
          bottomLeftRadiusX="15"
          topLeftRadiusX="15">
    <s:stroke>
      <s:LinearGradientStroke rotation="90" weight="1">
        <s:GradientEntry color="0x000000" 
                 alpha="0.5625"
                 alpha.down="0.6375"
                 alpha.selectedStates="0.6375" />
        <s:GradientEntry color="0x000000" 
                 alpha="0.75" 
                 alpha.down="0.85"
                 alpha.selectedStates="0.85" />
      </s:LinearGradientStroke>
    </s:stroke>
  </s:Rect>
  
  <!-- layer 8: text -->
  <!--- @copy spark.components.supportClasses.ButtonBase#labelDisplay -->
  <s:Label id="labelDisplay"
       textAlign="center"
       verticalAlign="middle"
       maxDisplayedLines="1"
       horizontalCenter="0" verticalCenter="1"
       left="10" right="10" top="2" bottom="2">
  </s:Label>
  
</s:SparkButtonSkin>