@use "../mixin/transition";

/*
---
name: form-control-base-padding()
category:
  - core/mixin
  - core/mixin/form
---
Sets padding for form controls

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

input[type="text"],
select {
  @include core.form-control-base-padding();
}
```
*/

@mixin form-control-base-padding() {
  padding: .75rem 1rem;
}

/*
---
name: form-control-base-border()
category:
  - core/mixin
  - core/mixin/form
---
Sets border for form controls

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

input[type="text"],
select {
  @include core.form-control-base-border();
}
```
*/

@mixin form-control-base-border() {
  --_border-radius: var(--_global--border-radius);
  --_border-color: var(--_form-control-border-color);

  border: 1px solid var(--_border-color);
  border-radius: var(--_border-radius);
  outline: 0;
  @include transition.transition(border);

  &:hover {
    --_border-color: var(--_form-control-border-color-hover);
  }

  &:active,
  &:focus,
  &:focus-within,
  &[aria-selected="true"] {
    --_border-color: var(--_form-control-border-color-focus);
  }

  > input,
  > textarea {
    border: none;
    outline: none;
  }
}