/* ------------------------------------------------------------------------------
*
*  # NoUI slider
*
*  Styles for NoUI range slider plugin
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


// Functional styling
// ------------------------------

// Container
.noUi-target {
    border-radius: 100px;
    .box-shadow(inset 0 1px 1px fade(#000, 10%));

    &,
    & * {
        .user-select(none);
    }
}

// Base
.noUi-base {
    width: 100%;
    height: 100%;
    position: relative;
}

// Slider origin
.noUi-origin {
    position: absolute;
    right: 0;
    top: 0;
    left: 0;
    bottom: 0;
    border-radius: 100px;

    .noUi-state-tap & {
        .transition(left 0.3s);
        .transition(top 0.3s);
    }
}

// Inherit cursor
.noUi-state-drag * {
    cursor: inherit !important;
}

// Background
.noUi-background {
    background-color: @gray-lighter;
    .box-shadow(inset 0 1px 1px fade(#000, 10%));
}

// Connector
.noUi-connect {
    background-color: @gray-light;
    margin-right: 1px;
    .transition(background 450ms);
}

// Disabled state
[disabled] {
    .noUi-connect,
    &.noUi-connect {
        background-color: #bbb;
    }

    .noUi-handle {
        cursor: @cursor-disabled;
    }
}


// Orientations
// ------------------------------

// Horizontal orientation
.noUi-horizontal {
    height: @slider-base-size;

    .noUi-handle {
        top: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
        left: -(@slider-base-size * 1.5);
    }

    &.noUi-extended {
        padding: 0 @content-padding-base;

        .noUi-origin  {
            right: -(@content-padding-base);
        }
    }
}

// Vertical orientation
.noUi-vertical {
    display: inline-block;
    width: @slider-base-size;
    height: 120px;

    & + & {
        margin-left: 20px;
    }

    .noUi-handle {
        top: -(@slider-base-size * 1.5);
        left: -(@slider-base-size * 1.5) + (@slider-base-size / 2);
    }

    &.noUi-extended {
        padding: @content-padding-base 0;

        .noUi-origin  {
            bottom: -(@content-padding-base);
        }
    }
}


// Handles and cursors
// ------------------------------

// Draggable
.noUi-dragable {
    cursor: w-resize;

    .noUi-vertical & {
        cursor: n-resize;
    }
}

// Handle
.noUi-handle {
    width: (@slider-base-size * 3);
    height: (@slider-base-size * 3);
    background-color: #fcfcfc;
    cursor: pointer;
    top: -(@slider-base-size);
    position: relative;
    z-index: 1;
    border-radius: 50%;
    border: 1px solid #bbb;

    .noUi-stacking & {
        z-index: 10; // this class is applied to the lower origin when its values is > 50%
    }

    // Inner circle
    &:after {
        content: '';
        display: inline-block;
        width: @slider-base-size;
        height: @slider-base-size;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -(@slider-base-size / 2);
        margin-left: -(@slider-base-size / 2);
        background-color: @color-grey-600;
        border-radius: 50%;
    }

    // Hover state
    &:hover,
    &:focus {
        background-color: #f5f5f5;
    }

    // Active state
    &:active {
        border-color: #ddd;

        &:after {
            background-color: #999;
        }
    }
}

// White handle
.noui-slider-white .noUi-handle:after {
    content: none;
}


// Sizing
// ------------------------------

// Large
.noui-slider-lg {

    // Handle
    .noUi-handle {
        width: (@slider-large-size * 3);
        height: (@slider-large-size * 3);
        top: -(@slider-large-size);

        // Inner circle
        &:after {
            width: @slider-large-size;
            height: @slider-large-size;
            margin-top: -(@slider-large-size / 2);
            margin-left: -(@slider-large-size / 2);
        }
    }

    // Horizontal
    &.noUi-horizontal {
        height: @slider-large-size;

        .noUi-handle {
            left: -(@slider-large-size * 1.5);
        }
    }

    // Vertical
    &.noUi-vertical {
        width: @slider-large-size;

        .noUi-handle {
            top: -(@slider-large-size * 1.5);
            left: -(@slider-large-size * 1.5) + (@slider-large-size / 2);
        }
    }
}

// Small and mini have the same handle size
.noui-slider-sm,
.noui-slider-xs {

    // Handle
    .noUi-handle {
        width: (@slider-small-size * 3);
        height: (@slider-small-size * 3);
        top: -(@slider-small-size);

        // Inner circle
        &:after {
            width: @slider-small-size;
            height: @slider-small-size;
            margin-top: -(@slider-small-size / 2);
            margin-left: -(@slider-small-size / 2);
        }
    }
}

// Small
.noui-slider-sm {

    // Horizontal
    &.noUi-horizontal {
        height: @slider-small-size;

        .noUi-handle {
            top: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
            left: -(@slider-small-size * 1.5);
        }
    }

    // Vertical
    &.noUi-vertical {
        width: @slider-small-size;

        .noUi-handle {
            top: -(@slider-small-size * 1.5);
            left: -(@slider-small-size * 1.5) + (@slider-small-size / 2);
        }
    }
}

// Mini
.noui-slider-xs {

    // Horizontal
    &.noUi-horizontal {
        height: @slider-mini-size;

        .noUi-handle {
            top: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
            left: -(@slider-small-size * 1.5);
        }
    }

    // Vertical
    &.noUi-vertical {
        width: @slider-mini-size;

        .noUi-handle {
            top: -(@slider-small-size * 1.5);
            left: -(@slider-small-size * 1.5) + (@slider-mini-size / 2);
        }
    }
}


// Solid slider handle
// ------------------------------

.noui-slider-solid {

    // Handle
    .noUi-handle {
        background-color: @gray-light;
        border-color: @gray-light;
        .box-shadow(none);

        // Inner circle
        &:after {
            background-color: #fff;
            .transition(opacity ease-in-out 0.2s);
        }

        // Change circle opacity on hover
        &:hover,
        &:focus {
            &:after {
                .opacity(0.75);
            }
        }
    }

    // Handle colors
    &.noui-slider-primary .noUi-handle {
        background-color: @brand-primary;
        border-color: @brand-primary;
    }

    &.noui-slider-danger .noUi-handle {
        background-color: @brand-danger;
        border-color: @brand-danger;
    }

    &.noui-slider-success .noUi-handle {
        background-color: @brand-success;
        border-color: @brand-success;
    }

    &.noui-slider-warning .noUi-handle {
        background-color: @brand-warning;
        border-color: @brand-warning;
    }

    &.noui-slider-info .noUi-handle {
        background-color: @brand-info;
        border-color: @brand-info;
    }
}


// Contextual colors
// ------------------------------

// Primary
.noui-slider-primary {
    .noUi-connect,
    &.noUi-connect {
        background-color: @brand-primary;
    }
}

// Danger
.noui-slider-danger {
    .noUi-connect,
    &.noUi-connect {
        background-color: @brand-danger;
    }
}

// Success
.noui-slider-success {
    .noUi-connect,
    &.noUi-connect {
        background-color: @brand-success;
    }
}

// Warning
.noui-slider-warning {
    .noUi-connect,
    &.noUi-connect {
        background-color: @brand-warning;
    }
}

// Info
.noui-slider-info {
    .noUi-connect,
    &.noUi-connect {
        background-color: @brand-info;
    }
}


// Tooltip
// ------------------------------

.noui-tooltip {
    display: none;
    position: absolute;
    border-radius: @border-radius-base;
    background: @gray-dark;
    color: #fff;
    top: -43px;
    padding: @padding-base-vertical @padding-base-horizontal;
    left: 50%;
    margin-left: -26px;
    text-align: center;
    width: 52px;

    &:after {
        content: '';
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: @gray-dark;
        position: absolute;
        bottom: -10px;
        left: 50%;
        margin-left: -5px;
    }

    .noUi-handle:hover & {
        display: block;
    }
}
