/*
 * Tom Select (assets/js/tom-select.js) drawn as the CRM's own fields: the box of
 * the .form-select or .form-control it replaces, the theme's focus ring and the
 * list of the design system. Its Bootstrap 5 theme sits in the vendor layer, just
 * above Bootstrap (app.css orders the layers), so these rules win without
 * fighting its selectors. A page using Tom Select adds this file to its styles.
 */
@import url("../vendor/tom-select/tom-select.bootstrap5.min.css") layer(vendor);

@layer components {
    /* the box: the field's own height and padding, room for the select's arrow only where it has one */
    .ts-wrapper.form-select { --ts-pr-caret: 34px; min-height: var(--control-height); }
    .ts-wrapper.form-control { --ts-pr-caret: 0px; min-height: var(--control-height); }
    .ts-wrapper .ts-control { padding: 7px 12px; font-size: var(--text-md); line-height: 1.45; color: var(--color-text); }
    .ts-wrapper .ts-control input::placeholder { color: var(--color-muted); opacity: 1; }
    .ts-wrapper.focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-focus); }
    .ts-wrapper.focus .ts-control { box-shadow: none; }
    /* the red border marks an invalid field; a select keeps its arrow and gets no icon, as the other fields */
    .ts-wrapper.is-invalid { border-color: var(--color-danger); background-image: none; }
    .ts-wrapper.form-select.is-invalid { background-image: var(--bs-form-select-bg-img); background-position: right 10px center; background-size: 16px 16px; }
    .ts-wrapper.is-invalid.focus { border-color: var(--color-danger); box-shadow: 0 0 0 3px var(--color-danger-soft); }
    /*
     * without a mouse the clear button shows only in a focused field, and only there it takes a tap:
     * unseen it is still there, and a tap near the right edge of an unfocused field would clear the value
     */
    @media (hover: none) {
        .plugin-clear_button:not(.focus) .clear-button { pointer-events: none; }
    }

    /* the list */
    .ts-dropdown { margin-top: 4px; padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); color: var(--color-text); }
    .ts-dropdown-content { max-height: 280px; padding: 0; }
    .ts-dropdown .option, .ts-dropdown .create, .ts-dropdown .no-results { padding: 7px 10px; border-radius: var(--radius-sm); overflow-wrap: anywhere; }
    .ts-dropdown .no-results { color: var(--color-muted); font-size: var(--text-sm); }
    .ts-dropdown .active, .ts-dropdown .active.create { background-color: var(--color-row-hover); color: var(--color-text); }
    .ts-dropdown .option.selected { font-weight: 650; color: var(--color-primary-strong); }
    .ts-dropdown [data-selectable] .highlight { background: var(--color-warning-soft); }
}