<script lang="ts">
  let clazz: string = "";
  export { clazz as class };
  export let id: string = "";
  export let disabled = false;
  export let style = "";
  export let required = false;
  export let autocomplete = "";
  export let value = "";
  export let placeholder = "";
</script>

<input
  bind:value
  type="text"
  {id}
  class="txt {clazz}"
  {disabled}
  on:click
  on:focus
  on:input
  on:change
  on:keydown
  on:keyup
  {style}
  {required}
  {autocomplete}
  {placeholder} />

<style lang="scss">
  .txt {
    appearance: none;
    background: transparent;
    color: var(--text);
    padding: 0.675em 1em;
    border: 1px solid var(--links);
    border-radius: 0.25rem;
    cursor: text;
  }
</style>