@import "https://cdnjs.cloudflare.com/ajax/libs/selectize.js/0.15.2/css/selectize.min.css";

.control .select .selectize-control {
    padding: 0;
    width: 100%;
    height: auto;
    min-height: 2.5rem;
    max-width: 100%;
}

.control .select.is-danger .selectize-control.input-error {
    border-color: hsl(var(--bulma-danger-h), var(--bulma-danger-s), var(--bulma-danger-l)) !important;
}

.control .select .selectize-control .selectize-input {
    box-shadow: none;
    border: none;
    font-size: var(--bulma-control-size);
    padding: var(--bulma-control-padding-vertical) var(--bulma-control-padding-horizontal);
    
}
.control .select .selectize-control .selectize-dropdown,
.control .select .selectize-control .selectize-input,
.control .select .selectize-control .selectize-input input {
    font-size: var(--bulma-control-size);
    color: hsl(var(--bulma-input-h),var(--bulma-input-s),var(--bulma-input-color-l));
}

.control .select .selectize-control .selectize-input input::placeholder {
    color: var(--bulma-input-icon-color);
    font-style: italic;
}

.control.has-icons-left .select .selectize-control .selectize-input.items {
    padding-left: var(--bulma-input-height);
    display: flex;
    flex-wrap: wrap;
}

.control .select .selectize-control .selectize-input:after {
    display: none;
}

.selectize-dropdown .create,
.selectize-dropdown .no-results,
.selectize-dropdown .optgroup-header,
.selectize-dropdown .option {
    padding: 8px 8px;
}

.selectize-dropdown .selected {
    background-color: var(--bulma-primary-soft);
    color: hsl(var(--bulma-input-h),var(--bulma-input-s),var(--bulma-input-color-l));
}

.selectize-dropdown .active:not(.selected) {
    background-color: var(--bulma-background);
    color: hsl(var(--bulma-input-h),var(--bulma-input-s),var(--bulma-input-color-l));
}

.selectize-control.multi .selectize-input > div {
    padding: 0px 6px;
    margin: 0 3px 0 3px;
    flex-wrap: wrap;
}

.selectize-control.multi {
    height: auto;
    min-height: 2.8rem;
    border: solid 1px !important;
    border-color: hsl(var(--bulma-input-h),var(--bulma-input-s),calc(var(--bulma-input-border-l) + var(--bulma-input-border-l-delta))) !important;
}


.selectize-input-mobile {
    height: auto !important;
}

@media screen and (max-width: 768px) {
.list-item-controls .ps-tag {
  display: inline-block !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: clamp(6rem, 15vw, 10rem);
  min-width: 0;
  height: auto;
  vertical-align: middle;/
}
}

.selectize-flex > .control {
  flex: 1 1 0;       /* chaque enfant prend la même largeur */
  min-width: 0;      /* important pour éviter que selectize force un dépassement */
}

.selectize-input-ps{
    overflow-wrap: anywhere;
    max-width: calc(100% - 2rem);
}

.selectize-dropdown-content .option {
  background-color: #fff !important;
  color: inherit !important;
}

.selectize-dropdown .option.active,
.selectize-dropdown .option.is-active,
.selectize-dropdown .option.selected,
.selectize-dropdown .option.active.selected {
  background-color: transparent !important;
  color: inherit !important;
}

.selectize-dropdown .option:hover {
  background-color: transparent !important;
  color: inherit !important;
}


.selectize-item-padded {
    display: grid !important;
    grid-template-columns: 1fr auto !important; /* texte prend tout l'espace, croix à droite */
    align-items: center !important;              /* croix verticalement centrée */
    gap: 6px !important;
    margin: 0.25rem 0.25rem 0.25rem 0 !important;
}

.selectize-item-padded .remove {
    justify-self: end !important;                /* pousse la croix complètement à droite */
}