/* ------------------------------------------------------------------------------
*
*  # Select2 selects
*
*  Styles for select2.js - custom select plugin
*
*  Version: 1.3
*  Latest update: Mar 10, 2016
*
* ---------------------------------------------------------------------------- */


// Select base
// ------------------------------

.select2-container {
    outline: 0;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-align: left;
}


// Single select
// ------------------------------

.select2-selection--single {
    cursor: pointer;
    outline: 0;
    display: block;
    height: @input-height-base;
    padding: @padding-base-vertical 0;
    line-height: @line-height-base;
    position: relative;
    border: 1px solid transparent;
    white-space: nowrap;
    .user-select(none);

    // Skip selects with custom background color
    &:not([class*=bg-]) {
        border-top-color: transparent;
        border-left-width: 0;
        border-right-width: 0;

        // Allow custom border color
        &:not([class*=border-]) {
            border-bottom-color: @input-border;

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

        // Disabled selection
        .select2-container--disabled & {
            color: @gray-light;
            border-bottom-style: dashed;

            // Disabled state for container
            &:not([class*=border-]) {
                border-bottom-color: @input-border;
                .box-shadow(none);
            }
        }
    }

    // Result text
    .select2-selection__rendered {
        display: block;
        padding-right: @padding-base-horizontal;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        // Icons
        > i {
            margin-right: @padding-base-horizontal;
        }
    }

    // Clear selection button
    .select2-selection__clear {
        position: relative;
        cursor: pointer;
        float: right;
        font-size: 0;
        line-height: 1;
        margin-top: ((@line-height-computed - @icon-font-size) / 2);
        margin-left: 5px;
        .opacity(0.75);

        // Add hover state effect
        &:hover {
            .opacity(1);
        }

        // Cross icon
        &:after {
            content: '\ed6b';
            font-family: 'icomoon';
            display: inline-block;
            font-size: @icon-font-size;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
    }

    // Placeholder
    .select2-selection__placeholder {
        color: @text-muted;
    }

    // Dropdown arrow
    .select2-selection__arrow {

        // Arrow icon
        &:after {
            content: '\e9c5';
            font-family: 'Icomoon';
            display: inline-block;
            position: absolute;
            top: 50%;
            right: 0;
            margin-top: -(@icon-font-size / 2);
            font-size: @icon-font-size;
            line-height: 1;
            color: inherit;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        // Change icon when menu is opened
        .select2-container--open &:after {
            content: '\e9c6';
        }

        // Hide default arrow
        b {
            display: none;
        }
    }

    // Disabled menu
    .select2-container--disabled & {
        cursor: @cursor-disabled;

        // Hide clear button
        .select2-selection__clear {
            display: none;
        }
    }
}

// In dark containers
.navbar-inverse .navbar-form,
.page-header-inverse {

    // General bottom border
    .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
        border-bottom-color: fade(#fff, 30%);
    }

    // Placeholder color
    .select2-selection--single .select2-selection__placeholder {
        color: #fff;
    }

    // When dropdown is opened
    .select2-container--focus,
    .select2-container--open {
        .select2-selection--single:not([class*=bg-]):not([class*=border-]) {
            border-bottom-color: #fff;
            .box-shadow(0 1px 0 #fff);
        }
    }
}


// Multiple select
// ------------------------------

.select2-selection--multiple {
    display: block;
    border: 1px solid transparent;
    cursor: text;
    outline: 0;
    .user-select(none);

    // Skip selects with custom background color
    &:not([class*=bg-]) {

        // Allow custom border color
        &:not([class*=border-]) {
            border-color: transparent;
        }

        // Keep bottom border for custom border color classes
        &[class*=border-] {
            border-top-color: transparent;
            border-left-color: transparent;
            border-right-color: transparent;

            // And add bottom spacing
            .select2-selection__rendered {
                padding-bottom: @padding-base-vertical;
            }
        }

        // Result text
        .select2-selection__rendered {
            padding: 0;
        }

        // Choices
        .select2-selection__choice {
            background-color: @tags-bg;
            color: @tags-color;
            margin-top: (@tags-spacing / 2);
            margin-bottom: (@tags-spacing / 2);
            border-radius: 100px;

            // Backgrounds
            &,
            .select2-container--disabled & {
                &:hover,
                &:focus {
                    background-color: @tags-bg;
                    color: @tags-color;
                }
            }

            // Change background on hover
            &:hover,
            &:focus {
                background-color: @tags-hover-bg;
                color: @tags-hover-color;
            }
        }

        // Search
        .select2-search--inline {

            // Change vertical spacing to equal one
            .select2-search__field {
                margin-top: (@tags-spacing / 2);
                margin-bottom: (@tags-spacing / 2);
            }

            // If no choices, remove left spacing
            &:first-child .select2-search__field {
                margin-left: 0;
            }
        }
    }

    // Result text
    .select2-selection__rendered {
        overflow: hidden;
        list-style: none;
        margin: 0;
        padding: 0 @tags-spacing @tags-spacing @tags-spacing;
        width: 100%;
    }

    // Disabled multiselect
    .select2-container--disabled & {

        // Disabled state for custom colored container
        &[class*=bg-] .select2-selection__choice {
            .opacity(0.9);
        }

        // Apply disabled cursor for all elements
        &,
        .select2-selection__choice,
        .select2-search__field {
            cursor: @cursor-disabled;
        }
    }

    // Choices
    .select2-selection__choice {
        background-color: @tags-bg;
        color: #fff;
        border-radius: @border-radius-base;
        cursor: default;
        float: left;
        margin-right: @tags-spacing;
        margin-top: @tags-spacing;
        padding: @padding-base-vertical @padding-base-horizontal;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;

        // Icons
        > i {
            margin-right: @content-padding-small;
        }

        // Remover
        .select2-selection__choice__remove {
            cursor: pointer;
            float: right;
            font-size: 0;
            margin-top: ((@line-height-computed - @font-size-mini) / 2);
            line-height: 1;
            margin-left: @element-horizontal-spacing;
            .opacity(0.75);

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

            // Highlight on hover
            &:hover {
                .opacity(1);
            }
        }

        // Disable choice
        .select2-container--disabled & {
            .opacity(0.6);

            // Hide remover
            .select2-selection__choice__remove {
                display: none;
            }
        }
    }

    // Search
    .select2-search--inline {
        float: left;

        // Search field
        .select2-search__field {
            font-size: 100%;
            margin-top: @tags-spacing;
            padding: @padding-base-vertical 0;
            background-color: transparent;
            border: 0;
            outline: 0;
            margin-left: @tags-spacing;
            -webkit-appearance: textfield;

            // Cancel button
            &::-webkit-search-cancel-button {
                -webkit-appearance: none;
            }
        }
    }
}



// Select results
// ------------------------------

// Dropdown
.select2-dropdown {
    background-color: @dropdown-bg;
    color: @dropdown-link-color;
    border-radius: @border-radius-base;
    display: block;
    position: absolute;
    left: -100000px;
    width: 100%;
    z-index: 9999;
    .box-shadow(@shadow-depth2);
}


// Results container
.select2-results {
    display: block;
}


// Options list
.select2-results__options {
    list-style: none;
    margin: 0;
    padding: 0;

    // Add scrollbar to first level list
    .select2-results > & {
        padding-bottom: @list-spacing;
        max-height: 250px;
        overflow-y: auto;

        // Add top spacing if search is hidden
        .select2-search--hide + & {
            padding-top: @list-spacing;
        }
    }

    // Add top spacing
    .select2-results:first-child > & {
        padding-top: @list-spacing;
    }
}


// Option
.select2-results__option {
    padding: @padding-base-vertical @padding-base-horizontal;
    cursor: pointer;
    .user-select(none);

    // Add 1px gap between options
    & + & {
        margin-top: 1px;
    }

    // Icons
    i {
        margin-right: @padding-base-horizontal;

        // Do not display empty icon
        &.icon-undefined {
            display: none;
        }
    }

    // Option group
    &[role=group] {
        padding: 0;
    }

    // Highlighted option (hover state)
    &.select2-results__option--highlighted {
        background-color: @dropdown-link-hover-bg;
    }

    // Disabled option
    &[aria-disabled=true] {
        color: @text-muted;
        cursor: @cursor-disabled;

        // In colored menu
        .select2-dropdown[class*=bg-] & {
            color: fade(#fff, 60%);
        }
    }

    // Selected option
    &[aria-selected=true] {
        background-color: @dropdown-link-active-bg;
        color: #fff; 
    }

    // Add double horizontal spacing for nested options
    .select2-results__options--nested > & {
        padding-left: (@padding-base-horizontal * 2);
        padding-right: (@padding-base-horizontal * 2);
    }
}


// Option group title
.select2-results__group {
    display: block;
    padding: @padding-base-vertical @padding-base-horizontal;
    font-size: @font-size-mini;
    line-height: @line-height-mini;
    text-transform: uppercase;
    cursor: default;
    margin-top: @list-spacing;
    margin-bottom: @list-spacing;

    // Remove top spacing from the first group title
    .select2-results__option:first-child > & {
        margin-top: 0;
    }
}


//
// Messages
//

// Results
.select2-results__message {
    color: @text-muted;
    cursor: default;

    // Mute if in colored dropdown
    .select2-dropdown[class*=bg-] & {
        color: fade(#fff, 75%);
    }
}

// Loading
.select2-results__option.loading-results {
    padding-top: 0;

    // Add extra top spacing
    + .select2-results__option {
        margin-top: @list-spacing;
    }
}

// Load more for infinite scroll
.select2-results__option--load-more {
    text-align: center;
    margin-top: @list-spacing;
    cursor: default;
}


//
// Opened dropdown
//

.select2-container--open {

    // Dropdown
    .select2-dropdown {
        left: 0;
    }

    // If opened above
    .select2-dropdown--above {
        border-bottom-width: 0;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;

        // Add border for colored menu
        &[class*=bg-] {
            border-bottom: 1px solid fade(#fff, 20%);
        }

        // Doesn't affect dropdowns with custom bg
        &:not([class*=bg-]) {
            top: -3px;
            .border-bottom-radius(@border-radius-base);
        }
    }
    &.select2-container--above {
        .select2-selection--single,
        .select2-selection--multiple {
            .border-top-radius(0);
        }
    }

    // If opened below
    .select2-dropdown--below {
        border-top-width: 0;
        border-top-left-radius: 0;
        border-top-right-radius: 0;

        // Add border for colored menu
        &[class*=bg-] {
            border-top: 1px solid fade(#fff, 20%);
        }

        // Doesn't affect dropdowns with custom bg
        &:not([class*=bg-]) {
            top: 3px;
            .border-top-radius(@border-radius-base);
        }
    }
    &.select2-container--below {
        .select2-selection--single,
        .select2-selection--multiple {
            .border-bottom-radius(0);
        }
    }
}


//
// Search inside dropdown
//

.select2-search--dropdown {
    display: block;
    position: relative;
    padding: @padding-base-horizontal;
    padding-left: ((@padding-base-horizontal * 2) + @icon-font-size);

    // Add search icon
    &:after {
        content: '\e98e';
        font-family: 'icomoon';
        position: absolute;
        top: 50%;
        left: @padding-base-horizontal;
        color: inherit;
        display: block;
        font-size: @font-size-large;
        margin-top: -(@font-size-large / 2);
        line-height: 1;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    // Remove top spacing from the results message
    + .select2-results .select2-results__message:first-child {
        padding-top: 0;
    }

    // Search field
    .select2-search__field {
        background-color: transparent;
        padding: @padding-base-vertical 0;
        border-radius: @input-border-radius;
        border: 1px solid @input-border;
        border-color: transparent transparent @input-border;
        outline: 0;
        width: 100%;

        // Cancel button
        &::-webkit-search-cancel-button {
            -webkit-appearance: none;
        }
    }

    // Hidden search field
    &.select2-search--hide {
        display: none;
    }
}



// Optional sizing
// ------------------------------

// Large
.select-lg {

    // Single
    &.select2-selection--single {
        height: @input-height-large;
        padding: @padding-large-vertical 0;
        font-size: @font-size-large;

        .select2-selection__rendered {
            padding-right: ((@padding-large-horizontal * 2) + 4);
        }
    }

    // Multiple
    &.select2-selection--multiple {
        .select2-selection__choice {
            padding: @padding-large-vertical @padding-large-horizontal;
            font-size: @font-size-large;
        }

        .select2-search--inline .select2-search__field {
            padding: @padding-large-vertical 0;
            font-size: @font-size-large;
        }
    }
}

// Small
.select-sm {

    // Single
    &.select2-selection--single {
        height: @input-height-small;
        padding: @padding-small-vertical 0;
        font-size: @font-size-small;
        line-height: @line-height-small;

        .select2-selection__rendered {
            padding-right: ((@padding-small-horizontal * 2) + 4);
        }
    }

    // Multiple
    &.select2-selection--multiple {
        .select2-selection__choice {
            padding: @padding-small-vertical @padding-small-horizontal;
            font-size: @font-size-small;
            line-height: @line-height-small;
        }

        .select2-search--inline .select2-search__field {
            padding: @padding-small-vertical 0;
        }
    }
}

// Mini
.select-xs {

    // Single
    &.select2-selection--single {
        height: @input-height-mini;
        padding: @padding-xs-vertical 0;
        font-size: @font-size-small;
        line-height: @line-height-small;

        .select2-selection__rendered {
            padding-right: ((@padding-xs-horizontal * 2) + 4);
        }
    }

    // Multiple
    &.select2-selection--multiple {
        .select2-selection__choice {
            padding: @padding-xs-vertical @padding-xs-horizontal;
            font-size: @font-size-small;
            line-height: @line-height-small;
        }

        .select2-search--inline .select2-search__field {
            padding: @padding-xs-vertical 0;
            font-size: @font-size-small;
            line-height: @line-height-small;
        }
    }
}



// Custom colors
// ------------------------------

// Common styles
.select2-selection--single,
.select2-selection--multiple {
    &[class*=bg-] {
        border-radius: @border-radius-base;

        // Disabled
        .select2-container--disabled & {
            .opacity(0.6);
        }
    }
}


// Single selection choice
.select2-selection--single[class*=bg-] {

    // Placeholder
    .select2-selection__placeholder {
        color: #fff;
    }

    // Result text
    .select2-selection__rendered {
        padding-left: @padding-base-horizontal;
        padding-right: ((@padding-base-horizontal * 2) + @padding-base-vertical);

        // In disabled mode
        .select2-container--disabled & {
            color: fade(#fff, 75%);
        }
    }

    // Dropdown arrow
    .select2-selection__arrow:after {
        right: @padding-base-horizontal;
    }
}


// Multiple selection choices
.select2-selection--multiple[class*=bg-] {

    // Mute choice
    .select2-selection__choice {
        background-color: fade(#000, 25%);
    }

    // Inline search field
    .select2-search--inline {
        .select2-search__field {
            .placeholder(@input-placeholder-light);
        }
    }
}


// Dropdown menu
.select2-dropdown[class*=bg-] {
    
    // Search field
    .select2-search--dropdown .select2-search__field {
        background-color: transparent;
        border-bottom-color: fade(#fff, 20%);
        color: #fff;
    }

    // Selected item
    .select2-results__option[aria-selected=true] {
        background-color: fade(#000, 20%);
    }

    // Hovered item
    .select2-results__option--highlighted {
        background-color: fade(#000, 10%);
    }
}



// Misc
// ------------------------------

// Mask
.select2-close-mask {
    border: 0;
    margin: 0;
    padding: 0;
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    min-height: 100%;
    min-width: 100%;
    height: auto;
    width: auto;
    z-index: 99;
    background-color: #fff;
    .opacity(0);
}

// Accessible
.select2-hidden-accessible {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: fixed !important;
    width: 1px !important;
}



// Loading remote data example demo
// ------------------------------

// Results
.select2-result-repository {
    padding-top: @padding-base-vertical;
    padding-bottom: @padding-base-vertical;
}

// Avatar
.select2-result-repository__avatar {
    float: left;
    width: 60px;
    margin-right: @content-padding-base;

    img {
        width: 100%;
        height: auto;
        border-radius: 100px;
    }
}

// Meta
.select2-result-repository__meta {
    margin-left: 70px;
}

// Title
.select2-result-repository__title {
    font-weight: 500;
    word-wrap: break-word;
    margin-bottom: 2px;
}

// Data
.select2-result-repository__forks,
.select2-result-repository__stargazers,
.select2-result-repository__watchers {
    display: inline-block;
    font-size: @font-size-small;
}

// Description
.select2-result-repository__description {
    font-size: @font-size-small;
}

// Add spacing for data
.select2-result-repository__forks,
.select2-result-repository__stargazers {
    margin-right: @content-padding-base;
}