@use '../config' as *; $input-border-width: 1px; :root { --ts-pr-clear-button: 0rem; --ts-pr-caret: 0rem; } .ts-input { color: inherit; } .focus .ts-control { @include border-radius(var(--border-radius)); } .ts-control { color: inherit; .dropdown-menu { width: 100%; height: auto; } } .ts-wrapper { .form-control, .form-select, &.form-control, &.form-select { box-shadow: $input-box-shadow; } &.is-invalid, &.is-valid { .ts-control { --ts-pr-clear-button: 1.5rem; } } // Tom Select's Bootstrap 5 stylesheet hardcodes Bootstrap's own caret and // valid/invalid icons on `.ts-wrapper.is-valid` / `.is-invalid`, and those // selectors outrank `.form-select`. Hand the backgrounds back to the // `.form-select` custom properties so a validated select shows the same // icons as a validated `.form-control`. `:not(.single)` matches the // specificity of the vendor rule for multi selects. &.form-select.is-invalid, &.form-select.is-valid { &, &:not(.single) { background-image: var(--form-select-bg-img), var(--form-select-bg-icon, none); } } } // Every declaration below is `!important`: the bootstrap5 preset CSS targets // these same selectors at equal specificity, and whichever stylesheet is // included last otherwise wins outright (not just for z-index — the preset's // `--bs-*` vars are undefined outside Bootstrap, so once it wins a property it // renders as transparent/unstyled rather than merely off-theme) (#2600). .ts-dropdown { // Tabler inits Tom Select with dropdownParent: 'body', so the dropdown is a // direct child of rather than of whatever contains the