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

// NumericStepper variables
$numericstepper-input-width: 8em
$numericstepper-border-radius: $border-radius
$numericstepper-button-width: 12px
$numericstepper-button-height: 7px
$numericstepper-button-xoffset: calc(50% - #{$numericstepper-button-width/2})
$numericstepper-button-yoffset: calc(50% - #{$numericstepper-button-height/2})

.jewel.numericstepper
    .jewel.textinput
        input
            width: $numericstepper-input-width
            border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius

@media (max-width: $desktop)
    .jewel.numericstepper
        width: 190px
        height: 39px

        .jewel.textinput
            left: 38px

            input
                border-radius: 0


// Jewel Spinner

// Spinner variables
.jewel.spinner
    width: 34px
    
    .jewel.button
        padding: 0px
        height: 19px

        border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
        border-left: 0px
        
        &, &:hover, &:hover:focus, &:active, &:active:focus
            color: transparent

        &.up
            border-bottom-right-radius: 0px

            &::after
                // background-size: 46%
                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 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: $numericstepper-button-width
                height: $numericstepper-button-height

                left: $numericstepper-button-xoffset
                top: $numericstepper-button-yoffset
        &.down
            border-top-right-radius: 0px
            border-top-style: groove
            
            &::after
                // background-size: 46%
                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: $numericstepper-button-width
                height: $numericstepper-button-height

                left: $numericstepper-button-xoffset
                top: $numericstepper-button-yoffset

@media (max-width: $desktop)
    .jewel.spinner
        left: -112px
        width: auto

        .jewel.button
            width: 39px
            height: 38px
            
            &.up
                left: 149px

                border: 1px solid darken($default-color, 15%)
                border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
            &.down
                left: -39px

                border: 1px solid darken($default-color, 15%)
                border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
                border-top-style: solid 
