:root {
  --search-icon: url('../img/ios-search-input-icon.svg');
  --search-input-background-image: var(--search-icon);
  --search-input-color: var(--input-text-color);
  --search-decoration-margin-right: 0;
  --search-input-border-radius: 5.5px;
  --search-input-height: 28px;
  --search-input-font-size: 14px;
  --search-input-placeholder-color: #7a797b;

  --material-search-icon: url('../img/android-search-input-icon.svg');

  --search-input: {
    @apply(--reset-input);
    @apply(--reset-font);
    appearance: textfield;
  }

  --search-input--disabled: {
    @apply(--disabled);
  }
}

/*~
  name: Search Input
  category: Search Input
  markup: |
    <input type="search" value="" placeholder="Search" class="search-input" style="width: 280px;">
*/

.search-input {
  @apply(--search-input);
  box-sizing: border-box;
  height: var(--search-input-height);
  font-size: var(--search-input-font-size);
  background-color: var(--search-input-background-color);
  box-shadow: none;
  color: var(--search-input-color);
  line-height: 1.3;
  padding: 0 8px 0 28px;
  margin: 0;
  border-radius: var(--search-input-border-radius);
  background-image: var(--search-input-background-image);
  background-position: 8px center;
  background-repeat: no-repeat;
  background-size: 13px;
  font-weight: var(--font-weight);
  display: inline-block;
  text-indent: 0;
}

.search-input::-webkit-search-cancel-button {
  appearance: textfield;
  display: none;
}

.search-input::-webkit-search-decoration {
  display: none;
}

.search-input:focus {
  outline: none;
}

.search-input::placeholder {
  color: var(--search-input-placeholder-color);
  font-size: var(--search-input-font-size);
  text-indent: 0;
}

.search-input:placeholder-shown {
}

.search-input:disabled {
  @apply(--search-input--disabled);
}

/*~
  name: Material Search Input
  category: Search Input
  markup: |
    <input type="search" value="" placeholder="Search" class="search-input search-input--material" style="width: 280px;">
*/

.search-input--material {
  @apply(--material-font);
  border-radius: 2px;
  height: 48px;
  background-color: var(--material-search-background-color);
  background-image: var(--material-search-icon);
  background-size: 18px;
  background-position: 18px center;
  font-size: 14px;
  padding: 0 24px 0 64px;
  box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.12), 0 2px 2px 0 rgba(0, 0, 0, 0.24), 0 1px 0 0 rgba(255, 255, 255, 0.06) inset;
}