////////////////////////////////////////////////////////////////////////////////
//
//  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 ComboBox

// ComboBox variables
// $combobox-input-width: 8em
$combobox-border-radius: $border-radius
$combobox-button-size: 22px
$combobox-button-xoffset: calc(50% - 8px)
$combobox-button-yoffset: calc(50% - 11px)

.jewel.combobox
    .jewel.textinput
        input
            // width: $combobox-input-width
            border-radius: $combobox-border-radius 0px 0px $combobox-border-radius
            
    .jewel.button
        color: transparent
        border-bottom-left-radius: 0px
        border-top-left-radius: 0px
        border-left: 0px
        
        &::before
            line-height: $combobox-button-size
                
        &::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
            width: ($combobox-button-size - 8)
            height: $combobox-button-size

            left: $combobox-button-xoffset
            top: $combobox-button-yoffset
        
        &[disabled]
            border-left: 0px !important

            &::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='#{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>") no-repeat center center
