/* Shared OT/OE search toolbar; control styling comes from css-zero. */
.oe-search__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--size-2);
}

.oe-search__main {
  position: relative;
  flex: 1 1 24rem;
  min-inline-size: 0;
}

/* Scope the search affordance and selected-filter contrast to this combobox. */
.oe-search__icon {
  position: absolute;
  inset-inline-start: var(--size-3);
  inset-block-start: var(--size-2_5);
  inline-size: var(--size-4);
  block-size: var(--size-4);
  color: var(--color-text-subtle);
  pointer-events: none;
  z-index: 2;
}

.oe-search .ts-wrapper { min-inline-size: 0; }

.oe-search .oe-search__main .ts-wrapper.multi .ts-control {
  padding-inline-start: var(--size-9);
}

.oe-search .ts-wrapper.multi .ts-control > .item {
  background-color: var(--pehuen-primary-100);
  border: 1px solid var(--pehuen-primary-300);
  color: var(--pehuen-primary-900);
  font-size: var(--text-xs);
  padding: .125rem .375rem;
  max-inline-size: 100%;
  overflow-wrap: anywhere;

  &.active { background-color: var(--pehuen-primary-200); }

  .remove {
    margin-inline-start: var(--size-1);
    padding-inline: var(--size-1);
    cursor: pointer;

    &:hover { color: var(--color-negative); }
  }
}

.oe-search .ts-dropdown .option {
  overflow-wrap: anywhere;
}

/* This picker has at most six fields; Tom Select's 200px cap clips the last one. */
.oe-search .ts-dropdown-content {
  max-height: none;
}

.oe-search__field {
  display: inline;
  border: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  --badge-background: var(--pehuen-primary-50);
  --badge-color: var(--color-text);
  --badge-padding: .0625rem .375rem;
}

.oe-search .oe-search__status,
.oe-search .oe-search__toggle {
  inline-size: auto;
  min-block-size: var(--size-9);
}

.oe-search__toggle {
  display: flex;
  align-items: center;
  gap: var(--size-2);
  cursor: pointer;
}

.oe-search .oe-search__status {
  inline-size: 11rem;
}