@import "~tom-select/dist/css/tom-select.bootstrap5.min.css";

.ts-wrapper .ts-control {
  height: 30px;
  min-height: unset;
  padding: 3px 28px 4px 7px;
}
.ts-wrapper.input-active {
  border-color: var(--form-input-hover-border-color);
  box-shadow: var(--form-input-hover-shadow);
  outline: 0;
}
.ts-wrapper.focus .ts-control {
  box-shadow: none;
  outline: 0;
}

.dropdown-input-wrap {
  background: var(--gray-100);
  padding: 7px 10px;
}
.dropdown-input,
.plugin-dropdown_input.focus .dropdown-input {
  background: white;
  border: 0;
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px rgba(43, 45, 80, .16), 0 0 0 1px rgba(6, 122, 184, 0), 0 0 0 2px rgba(6, 122, 184, 0), 0 1px 1px rgba(0, 0, 0, .08);
  color: var(--text-color-dark);
  height: 30px;
  position: relative;
}
.dropdown-input:focus {
  border: 0;
  box-shadow: 0 0 0 1px rgba(43, 45, 80, 0), 0 0 0 1px rgba(6, 122, 184, .2), 0 0 0 2px rgba(6, 122, 184, .25), 0 1px 1px rgba(0, 0, 0, .08);
  outline: 0;
}

.ts-dropdown-content {
  padding: 4px 5px;
}
.ts-dropdown [data-selectable].option {
  border-radius: var(--border-radius);
  margin: 2px 0;
}

.ts-wrapper.multi,
.ts-wrapper.multi.has-items .ts-control {
  height: auto;
}
.ts-wrapper.multi .ts-control,
.ts-wrapper.multi.has-items .ts-control {
  padding: 2px 15px 3px 7px;
}
.ts-wrapper.plugin-remove_button.multi.has-items .ts-control {
  padding-right: 55px;
}
.ts-wrapper.multi .ts-control > div {
  background: var(--gray-100);
  border-radius: var(--border-radius);
  box-shadow: 0 0 0 1px var(--white);
  margin: 0 3px 0 0;
  padding: 0 5px;
}
.ts-wrapper.plugin-remove_button .item .remove {
  border-left: 1px solid var(--gray-200);
}
.ts-wrapper.plugin-remove_button .item .remove:hover {
  background: var(--gray-200);
}

.plugin-clear_button.ts-wrapper .clear-button,
.plugin-clear_button.ts-wrapper.multi .clear-button {
  background: var(--gray-500) !important;
  border-radius: 50%;
  color: white;
  cursor: pointer;
  display: flex;
  align-content: center;
  justify-content: center;
  font-weight: bold;
  height: 14px;
  line-height: 1;
  padding: 0;
  right: 32px;
  top: calc(50% - 8px);
  width: 14px;
}
.ts-wrapper.plugin-clear_button.multi .clear-button {
  right: 10px;
}
.ts-wrapper.plugin-remove_button.plugin-clear_button.multi.has-items .clear-button {
  right: 32px;
}
.plugin-clear_button.ts-wrapper .clear-button:hover,
.plugin-clear_button.ts-wrapper.multi .clear-button:hover {
  background: var(--gray-700) !important;
}