@use "../mixin";

/*
---
name: form-control()
category:
  - core/abstract
  - core/abstract/form
---
Abstract form control component

### scss
```scss
@use "node_modules/sass-basis/src/css/core";

.c-form-control {
  @include core.form-control();
}
```

### html
```ejs
<input type="text" class="c-form-control">
```
*/

@mixin form-control() {
  background-color: var(--_color-white);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .035);
  max-width: 100%;
  @include mixin.form-control-base-padding();
  @include mixin.form-control-base-border();

  &:disabled {
    background-color: var(--_lightest-color-gray);
  }

  @at-root {
    textarea#{&} {
      height: auto;
      width: 100%;
    }
  }
}