.user_input,
.text-area,
textarea {
  background-color: var(--field-enabled);
  border: none;
  border-radius: 0;
  box-shadow: var(--box-shadow-elevation-0);
  display: flex;
  flex-direction: column;
  font-size: var(--text-size-02);
  font-weight: var(--text-weight-regular);
  letter-spacing: var(--letter-spacing-body-ui-02);
  line-height: var(--text-size-03);
  text-overflow: ellipsis;
}

textarea,
.text-area {
  padding: var(--spacing-03) var(--spacing-03) var(--spacing-04);
}

.user_input {
  gap: var(--spacing-02);
  height: 32px;
  padding: 8px 8px 8px 12px;
}

.user_input:empty {
  color: var(--text-placeholder);
}

.user_input:enabled,
.text-area:enabled,
textarea:enabled {
  color: var(--text-primary);
}

.user_input:hover,
.text-area:hover,
textarea:hover {
  background: var(--field-hover);
  box-shadow: var(--box-shadow-elevation-1);
}

.user_input:focus,
.text-area:focus,
textarea:focus {
  background: var(--field-enabled);
  box-shadow: 0 0 0 2px var(--focus-focus) inset;
  color: var(--text-primary);
  outline: none;
}

/* Should be replaced by a custom icon at some point */
input[type="search"]::-webkit-search-cancel-button {
  appearance: none;
}

.form-control::placeholder {
  color: var(--text-placeholder);
  font-size: var(--text-size-02);
}
