/*
 * Copyright 2012 Amadeus s.a.s.
 * Licensed under the Apache License, Version 2.0 (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.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

{CSSTemplate {
    $classpath : "aria.widgets.form.MultiAutoCompleteStyle",
    $extends : "aria.widgets.form.TextInputStyle"
}}
    {var skinnableClassName="MultiAutoComplete"/}

    {macro main()}
        .xMultiAutoComplete_list{
            position:relative;
            overflow:hidden;
        }
        .xMultiAutoComplete_list input{
            margin-top:2px;
            min-width:40px;
            vertical-align:middle !important;
            width:40px;
        }
        {call startLooping()/}
    {/macro}

    {macro writeSkinClass(info)}
        {call $TextInputStyle.writeSkinClass(info) /}
        {var skinClassName=info.skinClassName/}
        {var skinClass=info.skinClass/}

        .xMultiAutoComplete_${skinClassName}_options{
            display:inline-block;
            position:relative;
            border: ${skinClass.optionsBorderWidth}px solid ${skinClass.optionsBorderColor};
            background-color: ${skinClass.optionsBackgroundColor};
            color:${skinClass.optionsColor};
            border-radius:3px;
            margin:2px;
        }
        .xMultiAutoComplete_${skinClassName}_options .closeBtn{
            height:${skinClass.closeSpriteHeight}px;
            width:${skinClass.closeSpriteWidth}px;
            display:inline-block;
            padding-left:2px;
            cursor:pointer;
            {call background(skinClass.optionsBackgroundColor, skinClass.closeSpriteURL, "no-repeat -5px -25px")/}
        }

        .xMultiAutoComplete_${skinClassName}_options span.xMultiAutoComplete_Option_Text{
            outline: none;
            margin:2px 5px;
            display:inline-block;
            cursor:pointer;
        }
        .xMultiAutoComplete_${skinClassName}_options span.ellipsisClass{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            vertical-align:middle;
            line-height:18px;
        }
        .xMultiAutoComplete_${skinClassName}_options .closeBtn:hover{
            background-position: -5px -5px;
        }
        .xMultiAutoComplete_${skinClassName}_options.highlight{
            border: ${skinClass.optionsHighlightBorderWidth}px solid ${skinClass.optionsHighlightBorderColor};
            background-color: ${skinClass.optionsHighlightBackgroundColor};
            color:${skinClass.optionsHighlightColor};
        }

        .xMultiAutoComplete_${skinClassName}_options.highlight .closeBtn{
            {call background(skinClass.optionsHighlightBackgroundColor, skinClass.closeHighlightSpriteURL, "no-repeat -5px -5px")/}
        }

        .xMultiAutoComplete_${skinClassName}_options.highlight .closeBtn:hover{
            background-position: -5px -25px;
        }
        .xMultiAutoComplete_${skinClassName}_options span.xMultiAutoComplete_Option_Text{
            margin:2px 5px;
            display:inline-block;
            cursor:pointer;
        }
        .xMultiAutoComplete_${skinClassName}_options span.ellipsisClass{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            vertical-align:middle;
            line-height:18px;
        }

     {/macro}
{/CSSTemplate}