////////////////////////////////////////////////////////////////////////////////
//
//  Licensed to the Apache Software Foundation (ASF) under one or more
//  contributor license agreements.  See the NOTICE file distributed with
//  this work for additional information regarding copyright ownership.
//  The ASF licenses this file to You 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.
//
////////////////////////////////////////////////////////////////////////////////

// Jewel DropDownList

// DropDownList variables
$dropdownlist-border-radius: $border-radius

.jewel.dropdownlist    
    @if $flat
        background-color: lighten($default-color, 15%)
        border: 1px solid darken($default-color, 3%)
    @else
        background-color: lighten($default-color, 15%) // temporal until we fix compiler to join this on a backgroun property.
        //linear-gradient(lighten($default-color, 15%), lighten($default-color, 10%)) // this in iOS doesn't work 
        border: 1px solid darken($default-color, 15%)
    background-image: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>")
    background-size: 1.08em
    background-position: right .7em center
    background-repeat: no-repeat
    border-radius: $dropdownlist-border-radius

    &[disabled]
        @if $flat
            background-color: $disabled-color
            border: 1px solid $disabled-border-color
        @else
            background-color: $disabled-color
            border: 1px solid $disabled-border-color
        background-image: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{darken($disabled-color, 15%)}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>")
        box-shadow: none
        color: $disabled-font-color
        
        &::placeholder, &:-ms-input-placeholder
            color: $disabled-font-color

        + i
            color: $disabled-font-color

    // &::before
                
    // &::after
    //     background-size: 66%
    //     background: encodeSVG("<svg viewBox='0 0 12 8' version='1.1' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(0.000000, -1.000000)' fill='#{$primary-color}' fill-rule='nonzero'><g transform='translate(-2.000000, 0.000000)'><polygon transform='translate(8.000000, 4.705000) scale(1, -1) translate(-8.000000, -4.705000) ' points='3.41 8.41 8 3.83 12.59 8.41 14 7 8 1 2 7'></polygon></g></g></g></svg>") no-repeat center center


    &:focus
        @if $flat
            border: 1px solid $primary-color
            // background: lighten($primary-color, 25%)
        @else
            border: 1px solid darken($primary-color, 15%)