@charset "UTF-8";

/*doc
---
title: Buttons
name: a-buttons
category: Layout - Buttons
---

```html_example
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-default">Primary</button>
```


| Preview                                                        | Class                      |
|----------------------------------------------------------------|----------------------------|
| <button type="button" class="btn btn-default">Default</button> | <pre>btn btn-default</pre> |
| <button type="button" class="btn btn-primary">Primary</button> | <pre>btn btn-primary</pre> |
| <button type="button" class="btn btn-success">Success</button> | <pre>btn btn-success</pre> |
| <button type="button" class="btn btn-info">Info</button>       | <pre>btn btn-info</pre>    |
| <button type="button" class="btn btn-warning">Warning</button> | <pre>btn btn-warning</pre> |
| <button type="button" class="btn btn-danger">Danger</button>   | <pre>btn btn-danger</pre>  |
| <button type="button" class="btn btn-link">Link</button>       | <pre>btn btn-link</pre>    |
*/

.btn:focus, .btn:active {
  outline: none !important;
}

.btn-default {
  @include light-hatching();
  border-color: $silver;
  &[disabled] {
    background-color: lighten(#f9f9f9, 2%);
  }
  &:hover, &:focus, &:active, &.active {
    @include light-hatching();
    border-color: $silver;
    background-color: darken(#f9f9f9, 2%)
  }
}

.btn-primary {
  @include dark-hatching();
  border-color: $black;
  &[disabled] {
    background-color: lighten(#7a7a7a, 5%) !important;
  }
  &:hover, &:focus, &:active, &.active {
    @include dark-hatching();
    border-color: $black;
    background-color: darken(#7a7a7a, 5%) !important;
  }
}



/*doc
---
title: Sizes
name: b-size
category: Layout - Buttons
---

```html_example
<p>
  <button type="button" class="btn btn-primary btn-lg">Large button</button>
  <button type="button" class="btn btn-default btn-lg">Large button</button>
</p>
<p>
  <button type="button" class="btn btn-primary">Default button</button>
  <button type="button" class="btn btn-default">Default button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-sm">Small button</button>
  <button type="button" class="btn btn-default btn-sm">Small button</button>
</p>
<p>
  <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
  <button type="button" class="btn btn-default btn-xs">Extra small button</button>
</p>
```

## Block buttons

```html_example
<p>
  <button type="button" class="btn btn-primary btn-lg btn-block">Block level button</button>
  <button type="button" class="btn btn-default btn-lg btn-block">Block level button</button>
</p>
```
*/


/*doc
---
title: Active / Disabled
name: c-active-disabled
category: Layout - Buttons
---

```html_example
<p>
  <button type="button" class="btn btn-primary btn-lg active">Primary button</button>
  <button type="button" class="btn btn-default btn-lg active">Button</button>
</p>
<p>
  <button type="button" class="btn btn-lg btn-primary" disabled="disabled">Primary button</button>
  <button type="button" class="btn btn-default btn-lg" disabled="disabled">Button</button>
</p>
```
*/