<template>
  <div class="text-container">
    <input class="input-field"
           v-model="modelValue"
           :placeholder="placeholder"
           autocomplete="off"/>
  </div>
</template>

<script>
export default {
  name: "InputField",
  props: {
    name: 'InputField',
    props: {
      modelValue: {
        type: String,
        default: ''
      }
    },
    placeholder: {
      type: String,
      required: false,
      default: ''
    }
  },
  emits: ['update:modelValue']
}
</script>


<style scoped>

.input-field {
  border: none;
  outline: none;
  background: none;
  resize: none;
  font-family: inherit;
  font-size: 1.4rem;
  color: #002F54;
}

.text-container {
  display: flex;
  align-items: center;
  background: white;
  border-radius: 0.4rem;
  padding: 0.6rem 1.2rem;
  /* box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);*/
  border: 0.2rem solid #E3EDFF;
  transition: all 0.1s ease;
  flex: 1 0 auto;
}

.text-container:hover {
  background: #EEF4FF;
  border: 0.2rem solid #8DB3FE;
  /*transform: translateY(2px);*/
  transform: scale(1.01);
}

</style>