/* Search Input */

$line-height: $vs-component-line-height;
$font-size: 1em;

/**
 * Super weird bug... If this declaration is grouped
 * below, the cancel button will still appear in chrome.
 * If it's up here on it's own, it'll hide it.
 */
.vs__search::-webkit-search-cancel-button {
  display: none;
}

.vs__search::-webkit-search-decoration,
.vs__search::-webkit-search-results-button,
.vs__search::-webkit-search-results-decoration,
.vs__search::-ms-clear {
  display: none;
}

.vs__search,
.vs__search:focus {
  color: inherit;
  appearance: none;
  line-height: $line-height;
  font-size: $font-size;
  border: 1px solid transparent;
  border-left: none;
  outline: none;
  margin: 1px 0;
  padding: 0 7px;
  background: none;
  box-shadow: none;
  width: 0;
  max-width: 100%;
  flex-grow: 1;
  //z-index: 1; // мітки перекривають дропдауни
}

.vs__search::placeholder {
  color: mix($body-color, $body-bg, 50%);
}
[data-theme="dark"] {
  .vs__search::placeholder {
    color: mix($dark-body-color, $dark-body-bg, 50%);
  }
}

/**
    States
 */

// Unsearchable
.vs--unsearchable {
  .vs__search {
    opacity: 1;
  }
  &:not(.vs--disabled) .vs__search {
    cursor: pointer;
  }
}
// Single, when searching but not loading or open
.vs--single.vs--searching:not(.vs--open):not(.vs--combobox):not(.vs--loading) {
  .vs__search {
    opacity: .2;
  }
}
