/* ------------------------------------------------------------------------------
*
*  # SelectBoxIt
*
*  Styles for selectbox.js - custom select boxes plugin
*
*  Version: 1.2
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


/* # 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;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;

        // Remove outline
        &:focus {
            outline: 0;
        }
    }

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

    // Options list
    .selectboxit-options {
        max-height: 250px;
        width: 100%;
        padding: @list-spacing 0;
        overflow-x: hidden;
        overflow-y: auto;
        z-index: 999;
        text-align: left;
    }
}

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

// 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;
    margin: 2px 0 0;
    width: 100%;
    min-width: 200px;
    list-style: none;
    position: absolute;
    cursor: pointer;
    display: none;
    border-radius: @border-radius-base;
    .box-shadow(@shadow-depth2);

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

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

    // Selected link
    > .selectboxit-selected > .selectboxit-option-anchor {
        background-color: @dropdown-link-active-bg;
        color: @dropdown-link-active-color;
    }

    // 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 transparent;
    border-bottom-color: @input-border;
    color: @input-color;
    height: @input-height-base;
    padding: @padding-base-vertical 0;
    padding-right: (@padding-base-vertical + @padding-base-horizontal);

    // When opened
    &.selectboxit-open,
    &:focus {
        border-bottom-color: @input-border-highlight-color;
        .box-shadow(0 1px 0 @input-border-highlight-color);
    }

    // Arrow
    .selectboxit-arrow-container {
        right: 0;
    }
}

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

        // Input group addons
        + .input-group-btn,
        + .input-group-addon {
            padding-left: @padding-base-horizontal;
        }

        // 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: left;
}

// 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';
    }
}


// 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%;
    font-size: @icon-font-size;
    right: @padding-base-horizontal;
    margin-top: -(@icon-font-size / 2);
    line-height: 1;

    // Remove top edge from arrow
    .selectboxit-arrow {
        &[class*=icon-] {
            top: 0;
        }
    }

    // Caret
    .caret {
        &:after {
            text-align: right;
        }
    }
}

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

    // Icon
    > [class*=icon-] {
        margin-right: @padding-base-horizontal;
        width: auto;
    }

    // Image
    .selectboxit-option-icon-url {
        height: @line-height-computed;
        width: @line-height-computed;
        background-size: @line-height-computed @line-height-computed;
        border-radius: 100px;
        background-repeat: no-repeat;
        background-position: center;
        display: block;
    }
}

// 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-btn {
    padding: @padding-large-vertical 0;
    padding-right: (@padding-large-vertical + @padding-large-horizontal);
    height: @input-height-large;
    font-size: @font-size-large;
}

// Small
.selectbox-sm + .selectboxit-container .selectboxit-btn {
    padding: @padding-small-vertical 0;
    padding-right: (@padding-small-vertical + @padding-small-horizontal);
    height: @input-height-small;
}

// Mini
.selectbox-xs + .selectboxit-container .selectboxit-btn {
    padding: @padding-xs-vertical 0;
    padding-right: (@padding-xs-vertical + @padding-xs-horizontal);
    height: @input-height-mini;
    font-size: @font-size-small;
    line-height: @line-height-small;
}