@include exports("slider/layout") {

    .k-slider {
        border-width: 0;
        box-sizing: border-box;
        outline: 0;
        font-family: $slider-font-family;
        font-size: $slider-font-size;
        line-height: $slider-line-height;
        display: block;
        background-color: transparent;
        position: relative;
        -webkit-touch-callout: none;
        -webkit-tap-highlight-color: $rgba-transparent;

        .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;
                height: 100%;
            }
        }

        .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-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-slider-selection {
                left: auto;
                right: 0;
            }

            .k-button-increase {
                left: 0;
                right: auto;
            }

            .k-button-decrease {
                right: 0;
                left: auto;
            }
        }
    }

    .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-tick-large {
            display: flex;
            align-items: center;
            background-position: -2px center;
        }

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

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

        .k-last { background-position: -92px 0; }
        .k-tick-large.k-last { background-position: -2px 0; }
        .k-slider-topleft .k-last { background-position: -122px 0; }
        .k-slider-topleft .k-tick-large.k-last { background-position: -32px 0; }
        .k-slider-bottomright .k-last { background-position: -152px 0; }
        .k-slider-bottomright .k-tick-large.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-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-label {
                left: auto;
                right: 120%;
            }

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

    }

    .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;
        }

        .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-tick-large { background-position: center -2px; }
        .k-slider-topleft .k-tick-large { background-position: center -32px; }
        .k-slider-bottomright .k-tick-large { background-position: center -62px; }

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

        .k-last { background-position: 100% -92px; }
        .k-tick-large.k-last { background-position: 100% -2px; }
        .k-slider-topleft .k-last { background-position: 100% -122px; }
        .k-slider-topleft .k-tick-large.k-last { background-position: 100% -32px; }
        .k-slider-bottomright .k-last { background-position: 100% -152px; }
        .k-slider-bottomright .k-tick-large.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-rtl &,
        &.k-rtl,
        [dir="rtl"] &,
        &[dir="rtl"] {
            .k-slider-track,
            .k-slider-selection {
                right: 0;
                left: auto;
            }
            .k-slider-buttons .k-slider-track {
                right: $slider-button-spacing;
            }

            .k-button .k-i-arrow-e,
            .k-button .k-i-arrow-w {
                transform: scaleX(-1);
            }

            .k-label {
                left: auto;
                right: 0;
            }

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

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

    .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: $slider-button-spacing;
        }

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


    .k-draghandle {
        background-color: transparent;
        background-repeat: no-repeat;
        border-style: solid;
        border-width: $slider-draghandle-border-width;
        outline: 0;
        position: absolute;
        text-align: center;
        text-decoration: none;
        box-sizing: content-box;
        width: $slider-draghandle-size;
        height: $slider-draghandle-size;

        .k-slider-horizontal & {
            top: 50%;
            transform: translateY(-50%);

            &:active,
            &.k-pressed {
                transform: translateY(-50%) scale($slider-draghandle-active-scale);
            }
        }

        .k-slider-vertical & {
            left: 50%;
            transform: translateX(-50%);

            &:active,
            &.k-pressed {
                transform: translateX(-50%) scale($slider-draghandle-active-scale);
            }
        }

        .k-slider-transitions.k-slider-horizontal & {
            transition: left $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
        }

        .k-slider-transitions.k-slider-vertical & {
            transition: bottom  $slider-transition-speed $slider-transition-function, background-color $slider-transition-speed $slider-transition-function, transform $slider-draghandle-transition-speed $slider-draghandle-transition-function;
        }

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

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

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

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


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

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

        .k-slider-horizontal & {
            height: 100%;
            padding: 2px 0;
            box-sizing: border-box;
        }

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

        .k-slider-vertical .k-slider-buttons & {
            margin: 0;
            padding-top: $slider-button-spacing;
        }
    }

    .k-slider-tooltip {
        .k-callout-n,
        .k-callout-s {
            margin-left: -$tooltip-callout-size / 2;
        }

        .k-callout-w,
        .k-callout-e {
            margin-top: -$tooltip-callout-size / 2;
        }
    }
}