@import "https://cdn.jsdelivr.net/npm/@noli42/chosen@3.1.3/chosen.min.css";

.chosen-container {
  max-width: 100%;
}
.paragraph-type--media-platform .field-multiple-drag {
  display: none;
}

/* Chosen v3 (@noli42/chosen) compatibility - hide original select when Chosen is initialized */
.chosen-original-select {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(100% 100%) !important;
  white-space: nowrap !important;
}

/*
 * Chosen's Gin/Claro stylesheets force `width: auto !important` on
 * `.form-element.chosen-container-*`, which overrides the width Chosen computes
 * from `chosen.settings:minimum_width` (300px). The boxes shrink to their
 * content and long option labels wrap onto several lines in the dropdown.
 */
.form-element.chosen-container-single,
.form-element.chosen-container-multi {
  min-width: min(300px, 100%);
}

/* Let the dropdown grow to fit long option labels on one line. */
.form-element.chosen-container .chosen-drop {
  width: max-content;
  min-width: 100%;
  max-width: min(600px, 90vw);
}