// .user-registration,
// .user-registration-page,
// .ur-multi-device-form-preview {
.user-registration-account,
[class*="user-registration-membership_page_"],
.ur-multi-device-form-preview {
    select {
        min-height: 38px;
        width: 100%;
        min-width: auto !important;
        max-width: unset;
        padding: 0 $spacing_12px;
        -webkit-appearance: none;
        -moz-appearance: none;
        background: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-position: right 12px center;
        background-size: 14px 14px;
        cursor: pointer;
        color: $grey-400;
        margin: 0;
        border: $border_width solid $border_color;
        border-radius: $border_radius_4;
        background-color: $white;

        @media screen and (max-width: 782px) {
            font-size: 14px;
        }

        &:hover {
            color: $grey-400;
        }

        &:focus {
            outline: none;
            box-shadow: none;
            border-color: $primary_color;
        }

        &#bulk-action-selector-top,
        &#bulk-action-selector-bottom {
            width: 220px;
        }
    }

    .select2 {
        &-container {
            width: 100% !important;

            &--open,
            &--focus {
                .select2-selection {
                    border-color: $primary_color !important;
                }
            }

            &--default {
                .select2-selection {

                    &--single,
                    &--multiple {
                        min-height: 38px;
                        padding: 0;
                        border: $border_width solid $border-color;

                        &:has(.select2-selection__arrow) {
                            .select2-selection__rendered {
                                padding-right: $spacing_32px;
                            }
                        }

                        .select2-selection__rendered {
                            padding: 0 $spacing_12px;
                            display: block;
                            font-size: 14px;
                            line-height: 36px;

                            .select2-selection__clear {
                                font-size: 16px;
                                top: -1px;
                            }
                        }

                        .select2-selection__arrow {
                            top: 50%;
                            right: 6px;
                            transform: translateY(-50%);
                            height: unset;
                            position: absolute;
                            width: 20px;

                            b {
                                all: unset;
                                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23737373' viewBox='0 0 24 24'%3E%3Cpath d='M19.561 7.403a1.468 1.468 0 0 1 2.02 0 1.339 1.339 0 0 1 0 1.944l-8.57 8.25a1.468 1.468 0 0 1-2.021 0l-8.572-8.25a1.339 1.339 0 0 1 0-1.944 1.468 1.468 0 0 1 2.02 0L12 14.68l7.561-7.278Z'/%3E%3C/svg%3E");
                                background-repeat: no-repeat;
                                background-position: center;
                                background-size: 100%;
                                width: 14px;
                                height: 14px;
                                display: block;
                            }
                        }
                    }

                    &--multiple {
                        min-height: 38px;

                        .select2-selection__choice {
                            display: flex;
                            align-items: center;
                            gap: $spacing_4px;
                            padding: 0 $spacing_8px;
                            // margin: 3px 3px 3px 0;
                            margin: 4px 13px 4px -8px;
                            max-height: 30px;
                            background: #f4f4f4;
                            border-color: $border-color;
                            font-size: 14px;
                            line-height: 28px;
                            color: #383838;

                            // &:nth-child(1) {
                            //     margin-left: -9px;
                            // }

                            &__remove {
                                color: #999;
                                cursor: pointer;
                                display: inline-block;
                                font-weight: 700;
                                margin-right: 2px;
                                line-height: 16px;
                            }
                        }

                        .select2-search {
                            margin-bottom: 0;

                            &__field {
                                margin: 0;
                                width: 100% !important;
                            }
                        }
                    }
                }
            }

            &--disabled {
                .select2-selection {
                    opacity: .6;
                    pointer-events: none;
                    background: #f6f7f7;
                }
            }

            .select2-dropdown {
                position: relative;
                padding-top: $spacing_4px;

                >.button {
                    &.ur-select-all-countries-button {
                        float: right;
                        margin-left: $spacing_4px;
                        margin-right: $spacing_4px;
                    }

                    &.ur-unselect-all-countries-button {
                        margin-left: auto;
                    }
                }
            }
        }
    }

    >.select2-container {
        width: auto !important;
    }
}

body.user-registration {
    .select2 {
        &-container {
            &:has(.urcr-editor-select2-dropdown) {
                max-width: 200px;
            }

            .select2-dropdown {
                &.urcr-editor-select2-dropdown {
                    width: 100% !important;
                    border: 1px solid #e1e1e1;
                    border-radius: 4px;
                    padding: 0;
                    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

                    .ur-select2-title {
                        padding: 0;
                        width: 100%;
                        border-radius: 4px 4px 0 0;
                        overflow: hidden;

                        >p {
                            padding: 6px 12px;
                        }
                    }

                    .select2-search {
                        width: 100% !important;
                        box-sizing: border-box;
                        padding: 10px 8px;

                        .search-icon {
                            top: 20px !important;
                            left: 17px !important;
                        }

                        &__field {
                            height: 36px;
                            min-height: 36px;
                            padding-right: 12px !important;
                            border-color: #e1e1e1;

                            &:focus {
                                border-color: #475bb2;
                            }
                        }
                    }

                    .select2-results {
                        padding: 0 8px 8px;

                        &__options {
                            border-top: 0 !important;
                        }

                        &__option {
                            font-family: inherit;
                            border-radius: 4px;
                            padding: 8px 12px;
                            font-size: 13px;
                            line-height: 19px;

                            &:focus {
                                outline: none;
                                box-shadow: none;
                                border: 0;
                            }

                            &:hover,
                            &--highlighted {
                                background: #f8f8fa !important;
                                color: $primary_color !important;
                            }
                        }
                    }
                }
            }
        }
    }
}