/* source: https://github.com/orchidjs/tom-select/discussions/160#discussioncomment-8530024 */

.ts-wrapper .option .title {
    display: block;
}
.ts-wrapper .option .url {
    font-size: 12px;
    display: block;
    color: #a0a0a0;
}

.ts-wrapper.single .ts-control {
    box-shadow: none !important;
    background-image: none !important;
}

/* custom rules */

/* this file is loaded after the default CSS style from symfony/ux-autocomplete
 so `!important` is necessary for some rules */

.ts-control:not(.rtl) {
    /* p-2.5 */
    padding: .625rem .5rem !important;
    --ts-pr-caret: 0em !important;
}

/* remove space between the field and the results */
.ts-dropdown {
    margin: 0 !important;
}

.ts-dropdown .option.no-more-results {
    display: none;
}

/* change background of the active or hovered result */
.ts-dropdown .option:hover,
.ts-dropdown .active {
    background-color: var(--color-slate-100);
}

/* set the border of the container of the field */
.ts-wrapper.single .ts-control, .ts-dropdown.single {
    border-radius: .375rem !important;
    border-width: 2px !important;
    border-color: var(--color-slate-300) !important;
}

/* set the border of the container of the results */
.ts-dropdown.single {
    border-width: 1px !important;
    border-top-width: 1px !important;
}

/* set the border of the container of the field when it is hovered */
.ts-wrapper.single:hover .ts-control {
    border: 2px solid var(--color-slate-500) !important;
}

/* set the border of the container of the field when it is focused */
.ts-wrapper.single.focus .ts-control {
    border: 2px solid var(--color-slate-700) !important;
}

.ts-wrapper.single .ts-control input {
    /* apply text-sm */
    font-size: .875rem;
    line-height: 1.25rem;
}

/* close button */
.ts-wrapper.single.plugin-clear_button .clear-button {
    margin-right: 0.25rem !important;
    /* center vertically the “⨯” */
    padding-bottom: 1.1rem !important;
    width: 1rem;
    color: var(--color-slate-500);
    background: var(--color-slate-100) !important;
    height: 1rem;
    border-radius: 50%;
    text-align: center;
}

/* button to show and hide the results (dropdown) */
.ts-wrapper.single .ts-control::after {
    display: none !important;
    /* = “﹀” */
    /*content: "\FE40" !important;*/
    /*border: none !important;*/
    /*transform-origin: center !important;*/
    /*width: 0.75rem !important;*/
    /*height: 0.75rem !important;*/
}

/* invert the rotation when the dropdown is active */
/*.ts-wrapper.single.dropdown-active .ts-control::after {*/
/*    transform: rotate(180deg);*/
/*}*/