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

// HSlider variables
$slider-thumb-size: 18px // TODO (carlos_rovira) this is as well part of structure, need revision
$slider-track-border-radius: 3px
$slider-border-radius: 50%
$slider-scale-transform: 1.4

.jewel.slider
    
    // -- INPUT
    input
        &::-ms-fill-lower
            @if $flat
                background: $primary-color
                border: 1px solid darken($primary-color, 7%)
                box-shadow: none
            @else
                background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
                border: 1px solid darken($primary-color, 15%)
                box-shadow: inset 0 1px 0 lighten($primary-color, 20%)
            border-radius: $slider-track-border-radius

        &::-ms-fill-upper
            @if $flat
                background: lighten($default-color, 15%)
                border: 1px solid lighten($default-color, 15%)
            @else
                background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 5%))
                border: 1px solid darken($default-color, 15%)
            border-radius: $slider-track-border-radius

        // -- THUMB - Notice that we need to separate webkit and moz thumb whole definitions since webkit is unable to work with both mixed
        &::-webkit-slider-thumb
            width: $slider-thumb-size
            height: $slider-thumb-size
            @if $flat
                background: $primary-color
                border: 1px solid darken($primary-color, 8%)
                box-shadow: none
            @else
                background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
                border: 1px solid darken($primary-color, 15%)
                box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
            border-radius: $slider-border-radius
        
        &::-moz-range-thumb
            width: $slider-thumb-size
            height: $slider-thumb-size
            @if $flat
                background: $primary-color
                border: 1px solid darken($primary-color, 8%)
                box-shadow: none
            @else
                background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
                border: 1px solid darken($primary-color, 15%)
                box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
            border-radius: $slider-border-radius
        
        &::-ms-thumb
            width: $slider-thumb-size
            height: $slider-thumb-size
            @if $flat
                background: $primary-color
                border: 1px solid darken($primary-color, 8%)
                box-shadow: none
            @else
                background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
                border: 1px solid darken($primary-color, 15%)
                box-shadow: inset 0 1px 0 lighten($primary-color, 20%), 0 0 0 1px lighten(rgba($default-color, 0.3), 20%)
            border-radius: $slider-border-radius
        
        &:active::-webkit-slider-thumb, &:active::-moz-range-thumb
            transform: scale($slider-scale-transform)
        
        &:active::-ms-thumb
            transform: scale(.8) //$slider-scale-transform) in IE thumb is cut by track
        
        &[disabled]
            
            &::-ms-fill-lower
                background: darken($disabled-color, 5%)
                border: 1px solid darken($disabled-border-color, 10%)
                box-shadow: none

            &::-ms-fill-upper
                background: $disabled-color
                border: 1px solid $disabled-border-color
                box-shadow: none

            &::-webkit-slider-thumb, &::-moz-range-thumb, &::-ms-thumb
                background: $disabled-color
                border: 1px solid darken($disabled-border-color, 10%)
                box-shadow: none

            &:active::-webkit-slider-thumb, &:active::-moz-range-thumb, &:active::-ms-thumb
                transform: scale(1.0)

            + .slider-track-container > .slider-track-fill
                background: darken($disabled-color, 5%)
                border: 1px solid darken($disabled-border-color, 10%)
                box-shadow: none

            + .slider-track-container > .slider-track
                background: $disabled-color
                border: 1px solid $disabled-border-color
                box-shadow: none

.slider-track-container
    top: $slider-border-radius

.slider-track-fill
    @if $flat
        background: $primary-color
        border: 1px solid darken($primary-color, 7%)
        box-shadow: none
    @else
        background: linear-gradient(lighten($primary-color, 3%), darken($primary-color, 3%))
        border: 1px solid darken($primary-color, 15%)
        box-shadow: inset 0 1px 0 lighten($primary-color, 20%)
    border-radius: $slider-track-border-radius

.slider-track
    @if $flat
        background: lighten($default-color, 15%)
        border: 1px solid $default-color
    @else
        background: linear-gradient(lighten($default-color, 15%), lighten($default-color, 5%))
        border: 1px solid darken($default-color, 15%)
    border-radius: $slider-track-border-radius