/* ------------------------------------------------------------------------------
*
*  # Bootstrap multiselect
*
*  Styles for multiselect.js - custom multiple select plugin
*
* ---------------------------------------------------------------------------- */

// Check if component is enabled
@if $enable-multiselect {


    // Base
    // ------------------------------

    // Wrapper
    .multiselect-native-select {
        position: relative;
        display: block;

        // Hide original select
        select {
            border: 0 !important;
            clip: rect(0 0 0 0) !important;
            height: 0 !important;
            margin: 0 !important;
            overflow: hidden !important;
            padding: 0 !important;
            position: absolute !important;
            width: 0 !important;
            left: 0;
            top: 0;
            display: none;
        }
    }

    // Main button
    .multiselect {
        width: 100%;
        text-align: left;
        padding-left: $input-padding-x;
        padding-right: ($input-padding-x + ($icon-font-size * 1.5));
        text-transform: $multiselect-text-transform;
        background-color: $input-bg;
        border-color: $input-border-color;
        transition: $input-transition;
        @include text-truncate();

        // Caret
        &:after {
            position: absolute;
            top: 50%;
            right: $input-padding-x;
            margin-top: -($caret-font-size / 2);
        }

        // Allow font weight variations
        &:not([class*=font-weight-]) {
            font-weight: $multiselect-font-weight;
        }

        // Focus state
        &:focus,
        .show > &.dropdown-toggle {
            border-color: $input-focus-border-color;
            background-color: $input-focus-bg;
        }

        // Disabled state
        &.disabled {
            background-color: $input-disabled-bg;
            color: $input-disabled-color;
        }


        //
        // Make it as an input instead of button
        //

        // Large
        &.btn-lg {
            padding-left: $input-padding-x-lg;
            padding-right: ($input-padding-x-lg + ($icon-font-size * 1.5));

            // Caret spacer
            &:after {
                right: $input-padding-x-lg;
            }
        }

        // Small
        &.btn-sm {
            padding-left: $input-padding-x-sm;
            padding-right: ($input-padding-x-sm + ($icon-font-size * 1.5));

            // Caret spacer
            &:after {
                right: $input-padding-x-sm;
            }
        }
    }

    // Container
    .multiselect-container {
        max-height: $multiselect-max-height;
        overflow-y: auto;
        width: 100%;
    }

    // Item group
    .multiselect-group {
        font-weight: $font-weight-semibold;

        // Extra spacing for groups
        .multiselect-item + & {
            margin-top: $dropdown-padding-y;
        }

        // Disabled state
        &.disabled {
            color: $dropdown-link-disabled-color;
            cursor: $cursor-disabled;
        }
    }

    // Select All option
    .multiselect-all {
        font-weight: $font-weight-semibold;
    }

    // Filter
    .multiselect-filter {
        position: relative;
        padding: ($dropdown-item-padding-x - $dropdown-padding-y) $dropdown-item-padding-x;
        margin-bottom: ($dropdown-item-padding-x - $dropdown-padding-y);
    }

    // Items in option groups
    .multiselect-group-option-indented {
        .dropdown-item {
            padding-left: $dropdown-item-padding-x * 2;
        }
    }


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

    // Inside input group
    .input-group {
        .multiselect-native-select {
            display: flex;
            align-items: center;
            flex: 1 1 auto;

            // Remove rounded corners from the first item
            &:not(:first-child) {
                .multiselect {
                    @include border-left-radius(0);
                }
            }

            // Remove rounded corners from the last item
            &:not(:last-child) {
                .multiselect {
                    @include border-right-radius(0);
                }
            }
        }

        .multiselect:focus,
        .show > .multiselect {
            z-index: 3;
        }
    }
}