:root {
  --input-border-color: var(--color-border);
  --input-border-active-color: var(--color-brand);
  --input-border-radius: 8px;
}

.input,
:local(.input) {
  color: var(--color-text-dark);
  font-size: 1.12em;
  padding: 0.75rem 0.75rem;
  border: 1px solid var(--input-border-color);
  border-radius: var(--input-border-radius);
  transition: border 0.3s linear;
}

/* React doesn't receive events from IE11:s input clear button so don't show it */
.input::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

.input--small {
  padding: 0.3rem 0.4rem;
}

.input--focus,
.input:focus,
:local(.input):focus {
  outline: none;
  border: 1px solid var(--color-brand);
  transition: border 0.3s linear;
  color: var(--color-text-dark);
}

.input--borderless,
.input--borderless:focus {
  box-shadow: none;
  outline: 0;
  border: none !important;
  background: transparent;
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.no-focus:focus {
  outline: 0;
}

/* prevent safari from forcing type="search" styles - metabase#5225 */
.input[type="search"] {
  -webkit-appearance: none;
}