.input-search {
  width: 100%;
  height: 40px;

  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 4px;

  padding: 6px 14px 6px 2.35rem;

  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  transition: border-color .5s, box-shadow .5s, background-color .4s, color .4s;

  font-size: 0.875rem;
  color: #111827;
}

/* Superficie levantada sobre o canvas, como os cartoes: antes era um cinza chapado
   que nao pertencia a nenhuma elevacao. */
.dark .input-search {
  background: var(--color-grafite-medio);
  border-color: var(--color-cinza-escuro);
  color: var(--color-cinza-quase-branco);
}

.input-search:focus {
  outline: none;
  border-color: #2689fa;
  box-shadow: 0 0 0 1px #3a96ff;
}

.dark .input-search:focus {
  border-color: var(--color-azul-noturno);
  box-shadow: 0 0 0 1px var(--color-azul-noturno);
}

.field_with_errors .input-search {
  border-color: #dc2626;
  box-shadow: none;
}

.dark .field_with_errors .input-search {
  border-color: var(--color-vermelho-claro);
}

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

.input-search-clear {
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 1px;

  display: none;
  align-items: center;
  justify-content: center;

  width: 2.25rem;

  background-color: #fff;
  color: #9ca3af;
  cursor: pointer;
}

.dark .input-search-clear {
  color: var(--color-cinza-claro);
  background-color: var(--color-cinza-escuro);
}

.input-search-clear:hover {
  color: #374151;
}

.dark .input-search-clear:hover {
  color: var(--color-cinza-quase-branco);
}
/* Sem regra propria o placeholder herdava o cinza padrao do browser, apagado e fora
   da familia do tema. */
.dark .input-search::placeholder {
  color: var(--color-cinza-medio);
  opacity: 1;
}