@import '../base/states';
@import '../button/theme';
@import './layout';
@import './images/slider-h';
@import './images/slider-v';

$slider-trackbackground-color: darken($background, 10%) !default;
$slider-selection-background-color: $accent !default;
$slider-draghandle-background-color: $accent !default;
$slider-draghandle-border-color: rgba(0, 0, 0, .08) !default;
$slider-draghandle-hover-border-color: rgba(0, 0, 0, .15) !default;

$slider-draghandle-gradient: linear-gradient(adjust-hue($accent, 3), $accent) !default;
$slider-draghandle-hover-gradient: linear-gradient(adjust-hue($accent, 6), adjust-hue($accent, 3)) !default;
$slider-draghandle-active-gradient: linear-gradient($accent, adjust-hue($accent, 3)) !default;

$slider-draghandle-selected-background-color: $accent !default;
$slider-draghandle-selected-border-color: $accent !default;
$slider-draghandle-selected-box-shadow: inset 0 0 3px 1px darken($accent, 9%) !default;

$slider-draghandle-focus-box-shadow: 0 0 2px 2px rgba(0, 0, 0, .06) !default;
$slider-draghandle-active-box-shadow: inset 0 2px 3px 1px rgba(0, 0, 0, .06) !default;

$slider-button-focused-box-shadow: 0 0 0 2px rgba(0, 0, 0, .06) !default;

@include exports('slider/theme') {

.k-slider {
    .k-slider-track,
    .k-slider-selection {
        border-radius: $border-radius;
    }

   .k-slider-track {
        background-color: $slider-trackbackground-color;
    }

    .k-slider-selection {
        background-color: $slider-selection-background-color;
    }

    .k-draghandle {
        background-color: $slider-draghandle-background-color;
        border-color: $slider-draghandle-border-color;
        border-radius: 50%;

        &:hover,
        &.k-pressed {
            background-color: darken($accent, 4%);
        }

        &:focus {
            box-shadow: $slider-draghandle-focus-box-shadow;
        }

        &:active,
        &.k-pressed {
            box-shadow: $slider-draghandle-active-box-shadow;
        }

        &:hover {
            border-color: $slider-draghandle-hover-border-color;
        }
    }

    .k-button {
        border-radius: 50%;

        &:active {
            color: $normal-text-color;
            box-shadow: $slider-button-focused-box-shadow;
        }
    }

    &.k-state-disabled .k-button,
    &.k-state-disabled .k-draghandle {
        &:hover,
        &:focus,
        &:active {
            color: lighten($normal-text-color, 60%);
            background-color: $slider-draghandle-background-color;
            border-color: $slider-draghandle-border-color;
            box-shadow: none;
        }
    }
}

.k-slider-horizontal .k-tick {
    background-image: embed-url('slider-h.gif');
}

.k-slider-vertical .k-tick {
    background-image: embed-url('slider-v.gif');
}
}