/**
 * Make the Tom Select comboboxes look like the plain text inputs of the
 * exposed form (see the "Títol o paraules" field): square corners, thin
 * black border, Lora serif, brown text.
 */
.views-exposed-form .ts-wrapper.form-select {
  /* No chevron, so no reserved caret space on the right. */
  --ts-pr-caret: 6.4px;
  min-height: 0;
  padding: 0;
  border: 1px solid #000;
  border-radius: 0;
  background-color: #fff;
  background-image: none;
}

.views-exposed-form .ts-wrapper .ts-control,
.views-exposed-form .ts-wrapper.multi.has-items .ts-control {
  min-height: 0;
  padding: 1.6px 6.4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: Lora, serif;
  font-size: 16px;
  line-height: 24px;
  color: rgb(85, 60, 60);
}

.views-exposed-form .ts-wrapper .ts-control input {
  margin: 0;
  font-family: Lora, serif;
  font-size: 16px;
  line-height: 24px;
  color: rgb(85, 60, 60);
}

.views-exposed-form .ts-wrapper .ts-control input::placeholder {
  color: rgb(85, 60, 60);
  opacity: 1;
}

/* Focus: same native focus ring as the text inputs, instead of the
   Bootstrap blue glow the Tom Select theme puts on the control. */
.views-exposed-form .ts-wrapper.focus {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}

.views-exposed-form .ts-wrapper.focus .ts-control {
  box-shadow: none;
}

/* Selected values shown as removable tags. Pinned to the 24px text line so
   a selection does not make the field taller than the text input. */
.views-exposed-form .ts-wrapper.multi .ts-control > .item {
  height: 24px;
  margin: 0 3px 0 0;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: rgb(85, 60, 60);
  line-height: 24px;
  color: #fff;
}

.views-exposed-form .ts-wrapper.multi .ts-control > .item .remove {
  padding: 0 4px;
  border-left: 1px solid rgba(255, 255, 255, 0.4);
  line-height: 24px;
}

/* The open list. Stacked below the sticky header (z-index 100), so when
   the page scrolls an open list slides under the menus instead of
   painting over them. */
.views-exposed-form .ts-dropdown {
  z-index: 99;
  border-radius: 0;
  font-family: Lora, serif;
  font-size: 16px;
  color: rgb(85, 60, 60);
}

.views-exposed-form .ts-dropdown .option.active {
  background: rgb(85, 60, 60);
  color: #fff;
}