
/* These make the dropdown wider if needed based on content,
   possibly wider than the original value. For example, for Status,
   the shown value in a ticket listing might be "open", but when you click,
   one of the entries is "open (unchanged)". These allow the dropdown to
   stretch a little wider when it is opened so it looks better. */

div.ts-dropdown {
    width: unset;
    min-width: 100%;
}

.ts-dropdown-content {
    width: max-content;
    min-width: 100%;
}

/* The original clear button is too far away from right */
.ts-wrapper.plugin-clear_button .clear-button {
    margin-right: -25px !important;
}

div.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
    box-shadow: none;
}

.ts-dropdown.dropup {
    bottom: 100%;
    top: auto;
}

[data-bs-theme=light] {
    div.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
        border-color: #d0d0d0;
    }
}

[data-bs-theme=dark] {
    .ts-wrapper {
        background-color: #323D42 !important;
        border-color: #717171;
    }

    .ts-dropdown {
        color: #aaa;
    }

    .ts-dropdown .create {
        color: rgba(170, 170, 170, 0.8);
    }

    .ts-wrapper .ts-control,
    .ts-dropdown .active {
        color: var(--bs-body-color);
    }

    .ts-wrapper.multi .ts-control,
    .ts-wrapper.multi .ts-control > div.item,
    .ts-wrapper.multi .ts-control input {
        background-color: var(--bs-btn-bg) !important;
    }

    .ts-wrapper.multi .ts-control > div.item {
        border: 1px solid;
        border-color: #717171 !important;
        color: var(--bs-body-color);
    }

    .ts-wrapper.multi .ts-control > div.item .remove {
        border-left: none;
    }

    div.ts-wrapper.plugin-dropdown_input .ts-dropdown .dropdown-input {
        border-color: #717171;
    }
}

/* Override Tom Select styling for article search in top menu to match SimpleSearch */
.article-search .ts-wrapper {
    min-height: unset;
    height: 2em;
}

.article-search .ts-wrapper .ts-control {
    height: calc(2em - 2px);
    padding: 0 0.5em;
}
