/*!
 * ---------------------------------------------------------------------
 *
 * GLPI - Gestionnaire Libre de Parc Informatique
 *
 * http://glpi-project.org
 *
 * @copyright 2015-2026 Teclib' and contributors.
 * @copyright 2003-2014 by the INDEPNET Development Team.
 * @licence   https://www.gnu.org/licenses/gpl-3.0.html
 *
 * ---------------------------------------------------------------------
 *
 * LICENSE
 *
 * This file is part of GLPI.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 *
 * ---------------------------------------------------------------------
 */

@import "~select2/src/scss/core";

.select2-container {
    display: inline-block;

    *:focus {
        outline: 0;
    }

    .select2-selection {
        background-color: var(--tblr-bg-forms);
        border: var(--tblr-border-width) solid var(--tblr-border-color);
        border-radius: var(--tblr-border-radius);
        box-shadow: var(--tblr-box-shadow-input);
        transition: $input-transition;

        .select2-selection__rendered input[type="search"] {
            color: var(--tblr-body-color);
        }

        &.select2-selection--single {
            @include font-size(var(--tblr-body-font-size));

            height: $input-height;
            position: relative; // fix arrow position

            .select2-selection__arrow {
                height: $input-height;
            }

            .select2-selection__rendered {
                line-height: $input-height;
                direction: rtl; // ellipsis on left
                text-align: left;
                color: var(--tblr-body-color);
                border-color: var(--tblr-border-color);

                &::before {
                    content: "\200E"; // left-to-right mark: be sure that content is displayed in ltr way
                }

                > * {
                    unicode-bidi: plaintext; // preserve text direction
                }
            }

            .form-select-sm + & {
                @include font-size($input-font-size-sm);

                height: $input-height-sm;

                .select2-selection__arrow {
                    height: $input-height-sm;

                    b {
                        margin-top: -4px;
                    }
                }
            }

            .form-select-lg + & {
                @include font-size($input-font-size-lg);

                height: $input-height-lg;

                .select2-selection__arrow {
                    height: $input-height-lg;

                    b {
                        margin-top: -1px;
                    }
                }
            }
        }

        &.select2-selection--multiple {
            @include font-size($input-font-size-sm);

            min-height: $input-height;

            .form-select-sm + & {
                @include font-size(calc(#{$input-font-size-sm} * 0.875));

                min-height: $input-height-sm;
            }

            .form-select-lg + & {
                @include font-size(calc(#{$input-font-size-lg} * 0.875));

                min-height: $input-height-lg;
            }

            .select2-selection__rendered {
                .select2-selection__choice {
                    background-color: var(--tblr-active-bg);
                    border: var(--tblr-border-width) solid var(--tblr-border-color);
                    border-radius: var(--tblr-border-radius-sm);
                    padding: 1px 3px;
                    margin: 3px 3px 0 0;
                    max-width: 100%;
                    white-space: normal;

                    .select2-selection__choice__remove {
                        color: var(--tblr-dark);
                        font-weight: bold;
                        margin: 0 0 0 3px;

                        &:hover {
                            color: var(--tblr-black);
                        }
                    }
                }
            }
        }
    }

    &.select2-container--focus .select2-selection {
        border-color: $input-focus-border-color;
        box-shadow: $input-focus-box-shadow;
    }

    &.select2-container--disabled .select2-selection {
        border-color: var(--tblr-border-color);
        box-shadow: none;
        cursor: not-allowed;

        .select2-selection__rendered {
            color: var(--tblr-muted);
        }
    }

    .select2-dropdown {
        border-color: var(--tblr-border-color);
        border-radius: 0;
        background-color: var(--tblr-bg-forms);

        @include font-size($input-font-size);

        &.select-dropdown-sm {
            @include font-size($input-font-size-sm);
        }

        &.select-dropdown-lg {
            @include font-size($input-font-size-lg);
        }

        &.select2-dropdown--below {
            border-top: none;
            border-bottom-left-radius: var(--tblr-border-radius);
            border-bottom-right-radius: var(--tblr-border-radius);
        }

        &.select2-dropdown--above {
            border-top: 1px solid var(--tblr-border-color);
            border-top-left-radius: var(--tblr-border-radius);
            border-top-right-radius: var(--tblr-border-radius);
        }

        .select2-search {
            .select2-search__field {
                border: var(--tblr-border-width) solid var(--tblr-border-color);
                background-color: var(--tblr-bg-forms);
                color: var(--tblr-body-color);
                border-radius: var(--tblr-border-radius);
            }
        }

        .select2-results {
            .select2-results__options {
                .select2-results__option {
                    &:empty {
                        display: none;
                    }

                    &[aria-selected="true"]:not(.select2-results__option--highlighted) {
                        background-color: color-mix(in srgb, var(--tblr-bg-surface), black 5%);
                    }

                    &.select2-results__option--highlighted {
                        background-color: var(--tblr-primary);
                        color: var(--tblr-primary-fg);
                    }

                    &[role="group"] {
                        padding: 0;

                        .select2-results__options--nested .select2-results__option {
                            padding-left: 1em;
                        }
                    }

                    .select2-rendered__match {
                        text-decoration: underline;
                    }
                }
            }
        }
    }

    .btn-group > & {
        flex-grow: 1;
        flex-basis: content;

        // avoid overflow of select2 with btn-group
        @at-root .btn-group.w-100 .select2-container {
            width: 0 !important;
        }

        &:not(:last-child) {
            .select2-selection {
                border-top-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right: 0;
            }
        }
    }
}

// fix z-index issue for select2 dropdown container with a boostrap modal
.modal-backdrop ~ .select2-container--open {
    z-index: calc(var(--glpi-zindex-modal) + 1);
}
