@import '../base/layout';
@import '../button/layout';
@import '../icons/main';

$slider-size: 200px !default;
$slider-alt-size: 30px !default;
$slider-button-offset: 10px !default;
$slider-button-size: ($slider-alt-size - 2) !default;
$slider-track-thickness: 4px !default;

@include exports('slider/layout') {

$button-spacing: ($slider-button-size + $slider-button-offset);
$transition-speed: .3s;
$transition-function: ease-out;

.k-slider {
    background-color: transparent;
    border-width: 0;
    position: relative;

    .k-button {
        height: $slider-button-size;
        line-height: $slider-button-size;
        margin: 0;
        min-width: 0;
        outline: 0;
        padding: 0;
        position: absolute;
        width: $slider-button-size;
        box-sizing: content-box;

        .k-icon {
            vertical-align: baseline;
            line-height: $slider-button-size;
            margin-right: 0;
        }
    }

    .k-button-increase {
        right: 0;
        top: 0;
    }

    .k-button-decrease {
        left: 0;
        top: 0;
    }

    .k-label {
        font-size: .92em;
        position: absolute;
        white-space: nowrap;
    }

    .k-tick,
    .k-slider-track {
        cursor: pointer;
    }

    .k-tick {
        background-color: transparent;
        background-position: center center;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0;
        position: relative;
    }


    &.k-state-disabled {
        .k-tick,
        .k-slider-track,
        .k-draghandle {
            cursor: default;
        }
    }
}

.k-slider-vertical {
    height: $slider-size;
    width: $slider-alt-size;
    outline: 0;

    .k-button-decrease {
        bottom: 0;
        top: auto;
    }

    .k-tick {
        text-align: right;
        margin-left: 2px;
    }

    .k-slider-topleft .k-tick {
        text-align: left;
    }

    // ticks

    .k-tick { background-position: -92px center; }
    .k-slider-topleft .k-tick { background-position: -122px center; }
    .k-slider-bottomright .k-tick { background-position: -152px center; }

    .k-ticlarge { background-position: -2px center; }
    .k-slider-topleft .k-ticlarge { background-position: -32px center; }
    .k-slider-bottomright .k-ticlarge { background-position: -62px center; }

    .k-first { background-position: -92px 100%; }
    .k-ticlarge.k-first { background-position: -2px 100%; }
    .k-slider-topleft .k-first { background-position: -122px 100%; }
    .k-slider-topleft .k-ticlarge.k-first { background-position: -32px 100%; }
    .k-slider-bottomright .k-first { background-position: -152px 100%; }
    .k-slider-bottomright .k-ticlarge.k-first { background-position: -62px 100%; }

    .k-last { background-position: -92px 0; }
    .k-ticlarge.k-last { background-position: -2px 0; }
    .k-slider-topleft .k-last { background-position: -122px 0; }
    .k-slider-topleft .k-ticlarge.k-last { background-position: -32px 0; }
    .k-slider-bottomright .k-last { background-position: -152px 0; }
    .k-slider-bottomright .k-ticlarge.k-last { background-position: -62px 0; }

    // labels

    .k-label {
        display: block;
        left: 120%;
        text-align: left;
    }

    .k-last .k-label {
        top: -.5em;
    }

    .k-first .k-label {
        bottom: -.5em;
    }

    .k-slider-topleft .k-label {
        left: auto;
        right: 120%;
    }
}

.k-slider-horizontal {
    display: inline-block;
    height: $slider-alt-size;
    width: $slider-size;
    outline: 0;

    // ticks
    .k-tick {
        float: left;
        height: 100%;
        text-align: center;
        margin-top: 2px;
    }

    .k-tick { background-position: center -92px; }
    .k-slider-topleft .k-tick { background-position: center -122px; }
    .k-slider-bottomright .k-tick { background-position: center -152px; }

    .k-ticlarge { background-position: center -2px; }
    .k-slider-topleft .k-ticlarge { background-position: center -32px; }
    .k-slider-bottomright .k-ticlarge { background-position: center -62px; }

    .k-first { background-position: 0 -92px; }
    .k-ticlarge.k-first { background-position: 0 -2px; }
    .k-slider-topleft .k-first { background-position: 0 -122px; }
    .k-slider-topleft .k-ticlarge.k-first { background-position: 0 -32px; }
    .k-slider-bottomright .k-first { background-position: 0 -152px; }
    .k-slider-bottomright .k-ticlarge.k-first { background-position: 0 -62px; }

    .k-last { background-position: 100% -92px; }
    .k-ticlarge.k-last { background-position: 100% -2px; }
    .k-slider-topleft .k-last { background-position: 100% -122px; }
    .k-slider-topleft .k-ticlarge.k-last { background-position: 100% -32px; }
    .k-slider-bottomright .k-last { background-position: 100% -152px; }
    .k-slider-bottomright .k-ticlarge.k-last { background-position: 100% -62px; }

    // labels

    .k-label {
        left: 0;
        bottom: -1.2em;
        line-height: 1;
        width: 100%;
    }

    .k-first .k-label {
        left: -50%;
    }

    .k-last .k-label {
        left: auto;
        right: -50%;
    }

    .k-slider-topleft .k-label {
        top: -1.2em;
    }
}

.k-slider-wrap {
    height: 100%;
    width: 100%;
}

.k-slider-track,
.k-slider-selection {
    margin: 0;
    padding: 0;
    position: absolute;

    .k-slider-horizontal & {
        height: $slider-track-thickness;
        left: 0;
        margin-top: -($slider-track-thickness / 2);
        top: 50%;
    }

    .k-slider-vertical & {
        bottom: 0;
        left: 50%;
        margin-left: -($slider-track-thickness / 2);
        width: $slider-track-thickness;
    }
}

.k-slider-buttons .k-slider-track {
    .k-slider-horizontal & {
        left: $button-spacing;
    }

    .k-slider-vertical & {
        bottom: $button-spacing;
    }
}


.k-draghandle {
    background-color: transparent;
    background-repeat: no-repeat;
    border-style: solid;
    border-width: 1px;
    outline: 0;
    overflow: hidden;
    position: absolute;
    text-align: center;
    text-decoration: none;
    text-indent: -3333px;
    box-sizing: content-box;

    .k-slider-horizontal & {
        height: 14px;
        top: -6px;
        width: 14px;
        transition: left $transition-speed $transition-function, background-color $transition-speed $transition-function;
    }

    .k-slider-vertical & {
        height: 14px;
        left: -6px;
        width: 14px;
        transition: bottom  $transition-speed $transition-function, background-color $transition-speed $transition-function;
    }

    &.k-pressed {
        transition: none;
    }
}

.k-slider-selection {
    .k-slider-horizontal & {
        transition: width $transition-speed $transition-function;
    }

    .k-slider-vertical & {
        transition: height $transition-speed $transition-function;
    }

    &.k-pressed {
        transition: none;
    }
}


.k-slider-items {
    user-select: none;

    .k-slider-buttons & {
        margin-left: $button-spacing;
    }

    .k-slider-horizontal & {
        height: 100%;
    }

    .k-slider-vertical & {
        padding-top: 1px;
    }

    .k-slider-horizontal .k-slider-buttons & {
        padding-top: 0;
    }

    .k-slider-vertical .k-slider-buttons & {
        margin: 0;
        padding-top: 35px;
    }
}

}