<script>export let value = '';
export let name = '';
export let id = '';
export let cols = 30;
export let rows = 10;
export let disabled = false;
export let placeholder = '';
</script>

<textarea {name} {id} {cols} {rows} {value} {disabled} {placeholder} />

<style>textarea {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  color: #495057;
  background: var(--ui-white);
  border: 1px solid #ced4da;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  border-radius: var(--ui-radius);
  width: 100%;
  padding: 10px;
}
textarea:hover {
  border-color: var(--ui-primary);
}</style>
