:root {
  --gsd-antigen-outer-border: #e0e0e0;
  --gsd-antigen-radius: 24px;
  --gsd-antigen-height: 48px;
}

.ts-wrapper.js-antigen-list-dropdown,
.ts-wrapper.js-antibody-list-dropdown {
  position: relative;
}

.ts-wrapper.js-antigen-list-dropdown .ts-control,
.ts-wrapper.js-antibody-list-dropdown .ts-control {
  background-color: #fff;
  border: 1px solid var(--gsd-antigen-outer-border);
  border-radius: var(--gsd-antigen-radius);
  min-height: var(--gsd-antigen-height);
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.ts-wrapper.js-antigen-list-dropdown.dropdown-active .ts-control,
.ts-wrapper.js-antibody-list-dropdown.dropdown-active .ts-control {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.ts-wrapper.js-antigen-list-dropdown .ts-control > input,
.ts-wrapper.js-antibody-list-dropdown .ts-control > input {
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  height: calc(var(--gsd-antigen-height) - 2px) !important;
  min-height: calc(var(--gsd-antigen-height) - 2px) !important;
  padding: 0 !important;
  padding-left: 24px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  outline: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23233a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 0 50% !important;
  background-size: 16px 16px !important;
  width: 100% !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.ts-wrapper.js-antigen-list-dropdown.has-items .ts-control > input,
.ts-wrapper.js-antibody-list-dropdown.has-items .ts-control > input {
  margin-top: 0 !important;
}

/* When items are selected, hide the search input until focus. */
.ts-wrapper.js-antigen-list-dropdown.has-items:not(.focus) .ts-control > input,
.ts-wrapper.js-antibody-list-dropdown.has-items:not(.focus) .ts-control > input {
  width: 0 !important;
  min-width: 0 !important;
  flex: 0 0 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* On focus, show the search input below selected items. */
.ts-wrapper.js-antigen-list-dropdown.has-items.focus .ts-control > input,
.ts-wrapper.js-antibody-list-dropdown.has-items.focus .ts-control > input {
  width: 100% !important;
  flex: 1 0 100% !important;
  height: calc(var(--gsd-antigen-height) - 2px) !important;
  min-height: calc(var(--gsd-antigen-height) - 2px) !important;
  margin-top: 8px !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* When expanded (focused with items), keep bubbles away from the border */
.ts-wrapper.js-antigen-list-dropdown.has-items.focus .ts-control,
.ts-wrapper.js-antibody-list-dropdown.has-items.focus .ts-control {
  padding-top: 8px;
  padding-bottom: 8px;
}

.ts-wrapper.js-antigen-list-dropdown.has-items.focus .ts-control .item,
.ts-wrapper.js-antibody-list-dropdown.has-items.focus .ts-control .item {
  margin: 0 6px 6px 0;
}

.ts-wrapper.js-antigen-list-dropdown .ts-dropdown,
.ts-wrapper.js-antibody-list-dropdown .ts-dropdown {
  margin-top: 0;
  border: 1px solid var(--gsd-antigen-outer-border);
  border-top: 0;
  border-radius: 0 0 var(--gsd-antigen-radius) var(--gsd-antigen-radius);
  top: 100% !important;
  left: 0 !important;
  right: 0 !important;
  width: 100%;
  box-sizing: border-box;
  background-color: #fff;
  /* Clip option hover/active backgrounds to the rounded panel (default TS has overflow: visible). */
  overflow: hidden;
}