<?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 Spark skin class for the up button of the MX ScrollBar component. 

      @see mx.controls.scrollClasses.ScrollBar        
        
      @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" 
    alpha.disabled="0.5" blendMode="normal">
    
    <fx:Script>
        /* Define the skin elements that should not be colorized. 
           For scroll bar buttons, the graphics are colorized but the arrow is not. */
        static private const exclusions:Array = ["arrow"];
        /**
         * @private
         */
        override public function get colorizeExclusions():Array {return exclusions;}
        
        /* Define the symbol fill items that should be colored by the "symbolColor" style. */
        static private const symbols:Array = ["arrowFill1", "arrowFill2"];
        /**
         * @private
         */
        override public function get symbolItems():Array {return symbols};
        
        /**
         * @private
         */
        override protected function initializationComplete():void
        {
            useChromeColor = true;
            super.initializationComplete();
        }
    </fx:Script>
    
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- border/background -->
    <s:Rect left="0" right="0" minWidth="14" top="0" bottom="0" minHeight="17">
        <s:stroke>
            <s:SolidColorStroke color="0x686868" weight="1" alpha.disabled="0.2"/>
        </s:stroke>
        <s:fill>
            <s:SolidColor color="0xF9F9F9" color.down="0xDEEBFF" />
        </s:fill>
    </s:Rect>
    
    <!-- fill -->
    <s:Rect left="1" right="1" top="1" bottom="1">
        <s:fill>
            <s:LinearGradient>
                <s:GradientEntry color="0xFFFFFF" 
                               color.over="0xBBBBBB"
                               color.down="0xD6D6D6"
                               alpha="0.85" 
                               alpha.down="1" />
                <s:GradientEntry color="0xE7E7E7" 
                               color.over="0x9FA0A1"
                               color.down="0x888888"
                               alpha="0.85" 
                               alpha.down="1" />
            </s:LinearGradient>
        </s:fill>
    </s:Rect>
    
    <!-- highlight -->
    <s:Rect left="1" top="1" bottom="1" width="6">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" 
                        alpha="0.75" 
                        alpha.over="0.22"
                        alpha.down="0.22" />
        </s:fill>
    </s:Rect>
    
    <!-- arrow -->
    <!--- @private -->
    <s:Path horizontalCenter="0" verticalCenter="-1" id="arrow"
          data="M 3.5 0.0 L 7.0 7.0 L 0.0 7.0 L 3.5 0.0">
        <s:fill>
            <s:RadialGradient rotation="90" focalPointRatio="1">    
                <!--- @private -->
                <s:GradientEntry id="arrowFill1" color="0" alpha="0.65" />
                <!--- @private -->
                <s:GradientEntry id="arrowFill2" color="0" alpha="0.8" />
            </s:RadialGradient>
        </s:fill>
    </s:Path>              
</s:SparkSkin>
