﻿.select2-container--default
.select2-selection--multiple {
  border-color: var(--bs-border-color) !important;
}

.select2-container
.select2-selection--multiple {
  --select2-multiple-min-height: calc(var(--bs-input-height, 2.5rem) * 2);
  min-height: var(--select2-multiple-min-height);
  max-height: var(--select2-multiple-min-height);
  overflow-y: auto;
  overflow-x: hidden;
}

.form-select-sm.select2 + .select2-container
.select2-selection--multiple {
  --select2-multiple-min-height: calc(var(--bs-input-height, 2.25rem) * 2);
  min-height: var(--select2-multiple-min-height);
  max-height: var(--select2-multiple-min-height);
  font-size: .875rem;
}

.form-select-lg.select2 + .select2-container
.select2-selection--multiple {
  --select2-multiple-min-height: calc(var(--bs-input-height, 3rem) * 2);
  min-height: var(--select2-multiple-min-height);
  max-height: var(--select2-multiple-min-height);
  font-size: 1.25rem;
}

/* =========================================================
   Select2 multiple – caret alignment fix
   ========================================================= */

.form-select.select2 +
.select2-container--default
.select2-selection--multiple
.select2-search__field {
  margin: .25rem .38rem;
}

.form-select-sm.select2 +
.select2-container--default
.select2-selection--multiple
.select2-search__field {
  margin: .25rem .375rem;
}

.form-select-lg.select2 +
.select2-container--default
.select2-selection--multiple
.select2-search__field {
  margin: .25rem .375rem;
}

.select2-container--default
.select2-selection--multiple
.select2-search--inline
.select2-search__field {
  caret-color: currentColor;
}

/* =========================================================
 Select2 multiple – caret overflow hint
 ========================================================= */

.select2-container--default
.select2-selection--multiple
.select2-search {
  position: relative;
}

  .select2-container--default
  .select2-selection--multiple
  .select2-search::after {
    /*content: "……";*/
    content: "....";
    position: absolute;
    left: .25rem;
    top: 50%;
    transform: translateY(-20%);
    white-space: nowrap;
    display: inline-block;
    width: max-content;
    pointer-events: none;
    opacity: .45;
    font-weight: 300;
    color: currentColor;
  }

  /*hide hint when user is typing*/
  .select2-container--default
  .select2-selection--multiple
  .select2-search:has(.select2-search__field:not(:placeholder-shown))::after {
    opacity: 0;
  }

.form-select.select2 + .select2-container
.select2-selection__choice {
  font-size: inherit;
}

.form-select-sm.select2 + .select2-container
.select2-selection__choice {
  font-size: inherit;
}

.form-select-lg.select2 + .select2-container
.select2-selection__choice {
  font-size: inherit;
}

/* =========================================================
   Select2 multiple – selected items (dark theme)
   ========================================================= */

[data-bs-theme="dark"]
.select2-container {
  --select2-selection__choice-bg: var(--bs-secondary-rgb);
}

[data-bs-theme="dark"]
.select2-container--default
.select2-selection--multiple
.select2-selection__choice {
  background-color: rgba(var(--select2-selection__choice-bg), .25);
  border-color: rgba(var(--select2-selection__choice-bg), .35);
  color: var(--bs-body-color);
}

  /* hover / focus on chip */
  [data-bs-theme="dark"]
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice:hover {
    background-color: rgba(var(--select2-selection__choice-bg), .5);
    border-color: rgba(var(--select2-selection__choice-bg), .65);
  }

/* remove (×) icon inside chip */
[data-bs-theme="dark"]
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove {
  color: rgba(var(--bs-body-color-rgb), .75);
}

  [data-bs-theme="dark"]
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
    color: var(--bs-body-color);
  }

/* =========================================================
   Select2 multiple – chip remove (×) hover (dark theme)
   ========================================================= */

[data-bs-theme="dark"]
.select2-container--default
.select2-selection--multiple
.select2-selection__choice__remove {
  border-color: rgba(var(--select2-selection__choice-bg), .75);
  transition: background-color .12s ease, color .12s ease;
}

  [data-bs-theme="dark"]
  .select2-container--default
  .select2-selection--multiple
  .select2-selection__choice__remove:hover {
    color: var(--bs-body-color);
    background-color: rgba(var(--select2-selection__choice-bg), .5);
  }
