////////////////////////////////////////////////////////////////////////////////
//
//  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-border-radius: $border-radius
$numericstepper-default-button-width: 33px
$numericstepper-button-width: 12px
$numericstepper-button-height: 7px

.jewel.numericstepper
    height: 38px

    .jewel.spinner

    .jewel.textinput
        width: calc(100% - #{$numericstepper-default-button-width})

        input
            border-radius: $numericstepper-border-radius 0px 0px $numericstepper-border-radius

    .jewel.button
        border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
        border-left: 0px
        width: 12%
        width: $numericstepper-default-button-width
        height: 50%
        
        &::after

        &, &: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
        &.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
        &.up, &.down
            padding: 8.5px 16px

@media (max-width: $desktop)
    .jewel.numericstepper
        
        .jewel.textinput
            input
                border-radius: 0

        .jewel.spinner
            
        .jewel.button
            
            &.up
                border: 1px solid darken($default-color, 15%)
                border-radius: 0 $numericstepper-border-radius $numericstepper-border-radius 0
                margin-left: -1px
                height: 100%
            &.down
                border: 1px solid darken($default-color, 15%)
                border-radius: $numericstepper-border-radius 0 0 $numericstepper-border-radius
                border-top-style: solid
                margin-right: -1px
                height: 100%

// Jewel Spinner

// Spinner variables
.jewel.spinner
    //width: 34px