/**
 * Select2 4.1 multi-select tag geometry - applied to EVERY backend screen.
 *
 * 4.1 changed the multi-select tag markup: the remove control went from a floated <span> to a
 * <button> absolutely positioned at left:0 inside the choice, and 4.1 reserves room for it with
 * padding-left:20px on .select2-selection__choice. Any per-screen CSS that sets its own padding
 * on __choice takes that space away, and the "x" lands on top of the label text. That is the
 * single most common Select2 regression in this admin, and it kept coming back because each
 * screen fixed it locally.
 *
 * This file is deliberately MINIMAL and is registered for every backend module by
 * XWebModule::beforeControllerAction(). It touches nothing but the choice/remove geometry, so
 * it cannot restyle controls that screens already lay out themselves.
 *
 * It is NOT select2-backend-theme.css. That file also normalises control heights, floats and
 * inline layout with !important, which is correct for the screens that opt into it (Cms,
 * InditionBlog, Messaging, Admin) but breaks screens with their own sizing - forcing it
 * everywhere half-overrode the Shop product grid's category filter. The theme stays opt-in;
 * only this geometry fix is global.
 *
 * The properties here are chosen not to collide with the theme's __choice rule (which sets
 * display/float/margin/vertical-align but no padding or position), so the two compose safely in
 * either registration order.
 */

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    padding: 2px 8px 2px 22px !important;
    position: relative !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    background-color: transparent !important;
    border: none !important;
    border-right: 1px solid #aaa !important;
    bottom: 0 !important;
    color: #999 !important;
    cursor: pointer !important;
    font-weight: bold !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 5px !important;
    position: absolute !important;
    top: 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: #333 !important;
}

/** 4.1 wraps the tag label in its own span; it must not add padding of its own. */
.select2-container--default .select2-selection--multiple .select2-selection__choice__display {
    padding-left: 0 !important;
}