/* ------------------------------------------------------------------------------
*
*  # SelectBoxIt
*
*  Styles for selectbox.js - custom select boxes plugin
*
*  Version: 1.0
*  Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */


/* # Core
-------------------------------------------------- */

// SelectBoxIt container
.selectboxit-container {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 100%;

    // All children elements
    * {
        -webkit-touch-callout: none;
        outline: 0;
        white-space: nowrap;
        .user-select(none);
    }

    // Button
    .selectboxit {
        width: 100%;
        cursor: pointer;
        margin: 0;
        padding: 0;
        overflow: hidden;
        position: relative;
        height: @input-height-base;
        padding: @padding-base-vertical @padding-base-horizontal;
        padding-left: ((@padding-base-horizontal * 2) + 5);

        &:focus {
            outline: 0;
        }
    }

    span,
    .selectboxit-options a {
        display: block;
    }

    // Options list
    .selectboxit-options {
        width: 100%;
        min-width: 200px;
        max-height: 250px;
        margin: 0;
        padding: @list-spacing 1px;
        list-style: none;
        position: absolute;
        overflow-x: hidden;
        overflow-y: auto;
        cursor: pointer;
        display: none;
        z-index: 999;
        text-align: right;
        border-radius: @border-radius-base;
    }
}

// Disabled mouse interaction
.selectboxit.selectboxit-disabled,
.selectboxit-options .selectboxit-disabled {
    &,
    &:hover,
    &:focus {
        cursor: @cursor-disabled;
        .box-shadow(none);
        .opacity(0.65);
    }
}

// Hide original select
.selectboxit-rendering {
    display: inline-block !important;
    visibility: visible !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

// Dropdown menu
.selectboxit-list {
    background-color: @dropdown-bg;
    border: 1px solid @dropdown-border;

    // Link
    .selectboxit-option-anchor {
        color: @dropdown-link-color;
    }

    // Focused link
    > .selectboxit-focus > .selectboxit-option-anchor {
        display: block;
        background-color: @dropdown-link-hover-bg;
    }

    // Disabled link
    > .selectboxit-disabled > .selectboxit-option-anchor {
        color: @dropdown-link-disabled-color;
        cursor: @cursor-disabled;
    }

    // Custom border color
    .selectbox-container[class*=border-] > & {
        border-color: inherit;
    }

    // Solid color
    .selectbox-container[class*=bg-] > & {
        background-color: inherit;
        border-color: inherit;

        .selectboxit-option-anchor {
            color: #fff;
        }

        > .selectboxit-focus .selectboxit-option-anchor {
            background-color: fade(#000, 10%);
        }
    }
}


// Buttons
// ------------------------------

// Button
.selectboxit-btn {
    background-color: @input-bg;
    border: 1px solid @input-border;
    color: @input-color;
    border-radius: @input-border-radius;

    // When hovered
    &:hover {
        .box-shadow(0 0 0 100px fade(#000, 1%) inset);
    }

    // When opened
    &.selectboxit-open,
    &:focus {
        .box-shadow(0 0 0 100px fade(#000, 2%) inset);
    }

    // Inherit colors if custom bg color
    .selectboxit-container[class*=bg-] & {
        background-color: inherit;
        border-color: inherit;
        color: inherit;
    }

    // Inherit border color if custom bg color
    .selectboxit-container[class*=border-] & {
        border-color: inherit;
    }

    // Darken on hover and focus
    &[class*=bg-],
    .selectboxit-container[class*=bg-] & {
        &:hover {
            .box-shadow(0 0 0 100px fade(#000, 5%) inset);
        }

        &.selectboxit-open,
        &:focus {
            .box-shadow(0 0 0 100px fade(#000, 10%) inset);
        }
    }
}

// Inside input group
.input-group {
    .selectboxit-container {

        // Remove border radius
        > .selectboxit-btn {
            border-radius: 0;
        }

        // Add side border radius to the first child
        &:last-child > .selectboxit-btn {
            .border-right-radius(@input-border-radius);
        }
    }

    // Add side border radius to the simulated last child
    > select:first-child + .selectboxit-container > .selectboxit-btn {
        .border-left-radius(@input-border-radius);
    }
}

// Button text
.selectboxit-text {
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    float: right;
}

// Arrow
.selectboxit-default-arrow {
    position: relative;
    font-style: normal;

    &:after {
        content: '\e9c5';
        display: block;
        font-family: 'icomoon';
        font-size: @icon-font-size;
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    .selectboxit-open &:after {
        content: '\e9c6';
    }
}

// Image
.selectboxit-option-icon-url {
    border-radius: @border-radius-small;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
    margin-top: 3px;
    margin-left: 10px;
}


// Options
// ------------------------------

// Individual option
.selectboxit-option {
    margin: 0;
    list-style-type: none;

    .selectboxit-option-anchor{
        padding: @padding-base-vertical @padding-base-horizontal;
    }
}

// Optgroup header
.selectboxit-optgroup-header {
    margin: 0;
    list-style-type: none;
    padding: @padding-base-vertical @padding-base-horizontal;
    font-weight: 700;
    color: @text-color;
    font-size: @font-size-mini;
    line-height: @line-height-mini;
    text-transform: uppercase;

    &:hover {
        cursor: default;
    }
}

// Optgroup option
.selectboxit-optgroup-option .selectboxit-option-anchor {
    padding-left: (@padding-base-horizontal * 2);
    padding-right: (@padding-base-horizontal * 2);
}

// Dropdown arrow container
.selectboxit-arrow-container {
    position: absolute;
    top: 50%;
    width: @icon-font-size;
    left: @padding-base-horizontal;
    margin-top: -(@icon-font-size / 2);
    text-align: left;
    line-height: 1;

    .selectboxit-arrow {
        margin-top: 0;

        &[class*=icon-] {
            top: 0;
        }
    }
}

// Dropdown individual option icon positioning
.selectboxit-option-icon-container {
    float: right;

    // Icon
    > [class*=icon-] {
        margin-left: 10px;
        width: auto;
    }

    // Image
    .selectboxit-option-icon-url {
        height: @icon-font-size;
        width: @icon-font-size;
        background-size: @icon-font-size @icon-font-size;
        margin-top: 2px;
    }
}

// Options border radius
.selectboxit-option-first {
    .border-top-radius(@border-radius-base - 1);
}
.selectboxit-optgroup-header + .selectboxit-option-first {
    .border-top-radius(0);
}
.selectboxit-option-last {
    .border-bottom-radius(@border-radius-base - 1);
}



/* # Sizing
-------------------------------------------------- */

// Horizontal
// ------------------------------

// Fixed width
.selectbox-fixed {
    & + .selectboxit-container,
    & + .selectboxit-options {
        width: 250px;
    }
}

// Auto width
.selectbox-auto {
    & + .selectboxit-container,
    & + .selectboxit-options {
        width: auto;
    }
}


// Vertical
// ------------------------------

// Large
.selectbox-lg + .selectboxit-container .selectboxit {
    padding: @padding-large-vertical @padding-large-horizontal;
    padding-left: (@padding-large-horizontal * 2);
    height: @input-height-large;
    font-size: @font-size-large;

    .selectboxit-arrow-container {
        left: @padding-large-horizontal;
    }
}

// Small
.selectbox-sm + .selectboxit-container .selectboxit {
    padding: @padding-small-vertical @padding-small-horizontal;
    padding-left: (@padding-small-horizontal * 2);
    height: @input-height-small;

    .selectboxit-arrow-container {
        left: @padding-small-horizontal;
    }
}

// Mini
.selectbox-xs + .selectboxit-container .selectboxit {
    padding: @padding-xs-vertical @padding-xs-horizontal;
    padding-left: ((@padding-xs-horizontal * 2) + 5);
    height: @input-height-mini;
    font-size: @font-size-small;
    line-height: @line-height-small;

    .selectboxit-arrow-container {
        left: @padding-xs-horizontal;
    }
}
