.select2-container {
    display: flex;
}

.phone-detail {
    background-color: $section-bg;
    color: $title-color;
    border-radius: 6px;
    overflow: hidden;

    body.dark & {
        background-color: #171b27;
    }

    &:has(.form-control.form-control-white) {
        .select2-container--default {
            .select2-selection--single {
                background-color: $white;
            }
        }
    }

    .select2-dropdown {
        border-color: $border-color;
        z-index: 1055;
    }

    .select2-container--default {
        .selection {
            height: 100%;
            min-width: calc(95px + (115 - 95) * ((100vw - 320px) / (1920 - 320)));

            body.dark & {
                background-color: #323640;
            }
        }

        .select2-selection--single {
            height: 100%;
            border: none;
            border-right: 1px solid $border-color;
            background-color: $section-bg;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-inline: 9px;
            border-radius: 0;

            body.dark & {
                border-right-color: #323640 !important;
            }
        }

        .select2-selection__rendered {
            display: flex;
            align-items: center;
            color: $title-color;
            font-weight: 400;
            line-height: 1.5;
            font-size: calc(15px + (16 - 15) * ((100vw - 320px) / (1920 - 320)));

            body.dark & {
                color: $white;
            }
        }

        .select2-selection__arrow {
            position: relative;
            inset: unset;
            @include center(vertical);
            height: 100%;
        }
    }

    >.form-control {
        border: 1px solid $border-color !important;
        margin-left: calc(var(--bs-border-width) * -1) !important;

        [dir="rtl"] & {
            margin-left: unset !important;
            margin-right: calc(var(--bs-border-width) * -1) !important;
        }

        body.dark & {
            border-color: #454851 !important;
        }
    }
}

.select2-container--open {

    .select2-dropdown--above,
    .select2-dropdown--below {
        border-color: $border-color;
    }
}

.select2-container--default {
    .select2-search--dropdown {
        body.dark & {
            background-color: #171B27;
        }

        .select2-search__field {
            border-color: $border-color;
            border-radius: 4px;

            body.dark & {
                border-color: #323640;
                background-color: #323640;
                color: $white;

            }
        }
    }

    .select2-results__option[aria-selected] {
        width: 100%;
        padding-inline: 15px;

        span {
            width: 100%;
            font-size: 15px;
            color: $light-color;
        }
    }

    .select2-results__option[aria-selected=true] {
        background-color: $section-bg;
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: var(--theme-color);

        span {
            font-weight: 600;
            color: $white;
        }
    }

    .select2-results {
        >.select2-results__options {
            body.dark & {
                background-color: #171B27;
                color: rgba($white, 0.6);
            }

            &::-webkit-scrollbar-track {
                background-color: $section-bg;

                body.dark & {
                    background-color: #171B27;
                }
            }

            &::-webkit-scrollbar {
                width: 6px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #ddd;

                body.dark & {
                    background-color: var(--theme-color);
                }
            }
        }
    }
}

.error-div {
    display: flex;
    flex-direction: column;
    justify-content: unset;
    align-items: unset;

    .dropdown-wrapper {
        display: none;
    }

    .error {
        display: block;
        order: 1;
    }

    .select2-dropdown {
        border-color: $border-color;
        z-index: 1055;
    }

    .select2-container--default {
        &.select2-container--open {
            &.select2-container--below {

                .select2-selection--multiple,
                .select2-selection--single {
                    background-color: transparent;
                    border: 1px solid $border-color;
                    border-bottom: 0;
                }
            }
        }
    }

    .select2-container--default {
        .selection {
            height: 100%;
            min-width: 115px;
        }

        .select2-selection--single {
            height: 46px;
            border: none;
            background-color: $section-bg;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-inline: 9px;
            border-radius: 4px;
        }

        .select2-selection__placeholder {
            font-size: 16px;
            font-weight: 500;
            color: $title-color;
        }

        .select2-selection__rendered {
            display: flex;
            align-items: center;
            font-size: 16px;
            font-weight: 500;
            color: $title-color;

            body.dark & {
                color: $white;
            }
        }

        .select2-selection__arrow {
            position: relative;
            inset: unset;
            @include center(vertical);
            height: 100%;
        }
    }
}

.select2-container--open {

    .select2-dropdown--above,
    .select2-dropdown--below {
        border-color: $border-color;
        z-index: 1055;

        body.dark & {
            border-color: #454851;
        }
    }
}

.select2-container--default {
    .select2-search--dropdown {
        .select2-search__field {
            border-color: $border-color;
            border-radius: 4px;
        }
    }

    .select2-results__option[aria-selected] {
        width: 100%;
        letter-spacing: 1px;

        span {
            width: 100%;
            font-size: 15px;
            color: $light-color;
        }
    }

    .select2-results__option--highlighted[aria-selected] {
        background-color: var(--theme-color);

        span {
            font-weight: 600;
            color: $white;
        }
    }

    .select2-results {
        >.select2-results__options {
            &::-webkit-scrollbar-track {
                background-color: $section-bg;
            }

            &::-webkit-scrollbar {
                width: 6px;
                background-color: #F5F5F5;
            }

            &::-webkit-scrollbar-thumb {
                background-color: #ddd;
            }
        }
    }
}

.select2-container--default {
    .selection {
        width: 100%;

        .select2-selection--single {
            background-color: $section-bg;
            border: 1px solid $border-color;
            height: calc(40px + (46 - 40) * ((100vw - 320px) / (1920 - 320)));
            width: 100%;
            justify-content: space-between;
            display: flex;
            gap: 14px;
            align-items: center;
            border-radius: calc(4px + (6 - 4) * ((100vw - 320px) / (1920 - 320)));
            padding: calc(10px + (12 - 10) * ((100vw - 320px) / (1920 - 320)));

            body.dark & {
                background-color: #171B27;
                border-color: #454851;
            }

            .select2-selection__rendered {
                padding: 0;
                display: flex;
                line-height: 1.5;

                [dir="rtl"] & {
                    padding: 12px 12px 12px 24px;
                }

                .select2-selection__placeholder {
                    color: #999;
                    font-size: calc(14px + (16 - 14) * ((100vw - 320px) / (1920 - 320)));
                    font-weight: 400;
                    line-height: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    width: 100%;
                }
            }
        }

        .select2-selection__arrow {
            position: relative;
            inset: unset;
            transform: unset;
            width: 16px;
            height: 16px;

            b {
                border: none;
                background-image: url(../images/svg/arrow.svg);
                background-position: center;
                background-repeat: no-repeat;
                width: 16px;
                height: 16px;
                position: relative;
                inset: unset;
                transform: unset;
                display: block;
                margin: 0;

                body.dark & {
                    filter: invert(1);
                }
            }
        }
    }
}