.ts-wrapper {
   border: 1px solid var(--border-color);
   border-radius: 4px;
   position: relative;
}

.ts-control {
   border: none;
   height: 26px;
   display: flex;
   div {
      width: 100%;
      span {
         flex-grow: 1;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
         color: var(--body-fg);
         padding-top: 4px !important;
      }
   }
}

.tom-select {
   width: 300px;
}

.ts-control,
.ts-wrapper.single.input-active .ts-control {
   background: var(--body-bg);
   cursor: text;
   margin-top: 1px;
}

.plugin-dropdown_input .dropdown-input {
   background: var(--body-bg) !important;
}

.ts-wrapper.single .ts-control,
.ts-wrapper.single .ts-control input {
   background-color: var(--body-bg) !important;
   padding-top: 0px;
}

.ts-wrapper.single .ts-control input {
   padding-top: 4px !important;
}

.ts-wrapper.plugin-remove_button:not(.rtl) .item .remove {
   color: var(--body-fg);
}

.ts-dropdown [data-selectable].option {
   background-color: var(--body-bg);
   color: var(--body-fg);
}

.ts-dropdown [data-selectable].option:hover,
.ts-dropdown [data-selectable].option:focus {
   background-color: var(--primary);
   color: var(--body-fg);
}

.ts-dropdown-content {
   .spinner {
      display: none;
   }
}

.ts-dropdown {
   z-index: 2000 !important;
   left: 0 !important;
   width: 100% !important;
   position: absolute !important;
}