<script>import { typeAction } from '../../actions/typeAction';
import { BEM } from '../../models/BEM';
export let value = '';
export let id = '';
export let placeholder = '';
export let name = '';
export let disabled = false;
export let readonly = false;
export let type = 'text';
export let size = 'md';
const bm = new BEM('UI-InputText', {
    [size]: !!size
});
bm.append($$props.class);
</script>

<input
	{id}
	{name}
	class={bm.toString()}
	use:typeAction={type}
	bind:value
	{placeholder}
	{readonly}
	{disabled}
/>

<style>input {
  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%;
}
input:hover {
  border-color: var(--ui-primary);
}

.s {
  font-size: 0.875rem;
  padding: 0.65625rem 0.65625rem;
}

.md {
  padding: 0.75rem 0.75rem;
  font-size: 1rem;
}

.lg {
  font-size: 1.25rem;
  padding: 0.9375rem 0.9375rem;
}</style>
