/*doc
---
title: Buttons
name: Buttons
category: CSS
---

```html_example_table
<p><button class="btn btn-default">Normal</button>
<button class="btn btn-default btn-sm">Small</button></p>

<h3>Normal buttons</h3>
<p><button class="btn btn-link">Link button</button>
<button class="btn btn-link" disabled>Link button</button></p>
<p><button class="btn btn-default">Default</button>
<button class="btn btn-default" disabled>Default disabled</button></p>
<p><button class="btn btn-primary">Primary</button>
<button class="btn btn-primary" disabled>Primary disabled</button></p>
<p><button class="btn btn-success">Success</button>
<button class="btn btn-success" disabled>Success disabled</button></p>
<p><button class="btn btn-danger">Danger</button>
<button class="btn btn-danger" disabled>Danger disabled</button></p>

<h3>Small buttons</h3>
<p><button class="btn btn-sm btn-default">Small default</button>
<button class="btn btn-sm btn-primary">Small primary</button>
<button class="btn btn-sm btn-link">Small link button</button></p>

<h3>Small buttons with icons</h3>
<p><button class="btn btn-sm btn-default"><i class="fa fa-plus"></i></button>
<button class="btn btn-sm btn-primary">Small primary <i class="fa fa-plus"></i></button></p>

<h3>Social buttons</h3>
<p>
<button class="btn btn-default btn-facebook"><i class="fa fa-facebook"></i> Add new Facebook account</button>
<button class="btn btn-default btn-facebook-active"><i class="fa fa-facebook"></i>Facebook Connected <i class="fa fa-remove"></i></button>
</p>
<p>
<button class="btn btn-default btn-twitter"><i class="fa fa-twitter"></i> Connect to Twitter</button>
<button class="btn btn-default btn-twitter-active btn-active"><i class="fa fa-twitter"></i> Twitter Connected <i class="fa fa-remove"></i></button>
</p>
<p>
<button class="btn-linkedin btn btn-default"><i class="fa fa-linkedin"></i> Connect to Linkedin</button>
<button class="btn-linkedin-active btn btn-default"><i class="fa fa-linkedin"></i> Linkedin Connected <i class="fa fa-remove"></i></button>
</p>

<h3>Stretched buttons</h3>
<p><button class="btn btn-default btn-wide">Wide button</button></p>

```
 */
@import "buttons_social";
$btn-vertical-padding: 8px;

.btn {
  font-weight: $semi-bold;
  margin-left: $gutter-horizontal-x2;
  padding-bottom: $btn-vertical-padding;
  padding-top: $btn-vertical-padding - 1;

  &:first-child {
    margin-left: 0;
  }

  &[disabled],
  &.disabled {
    cursor: default;
  }

  &-default {

    &:hover {
      background: $btn-default-bg;
      border-color: $btn-default-border-hover;
      color: $btn-default-color-hover;
    }

    &:active,
    &:focus,
    &:active:focus {
      background: $btn-default-bg;
      border-color: $btn-default-border-active;
      box-shadow: none;
      color: $btn-default-color-active;
      outline: none;
    }

    &:disabled {

      &:hover {
        color: $btn-default-color;
      }
    }
  }

  &-primary {

    &:hover {
      background: $btn-primary-bg-hover;
      border-color: $btn-primary-bg-hover;
      color: $white;
    }

    &:active,
    &:focus,
    &:active:focus {
      background: $btn-primary-bg-active;
      border-color: $btn-primary-bg-active;
      box-shadow: none;
      color: $white;
    }
  }

  &-wide {
    display: inline-block;
    text-align: left;
    width: 100%;
  }

  &-sm {
    font-size: $font-size-base;
    font-weight: $regular;
    margin-left: $gutter-horizontal;
    padding-bottom: $btn-sm-vertical-padding + 1;
    padding-top: $btn-sm-vertical-padding - 1;

    i {
      position: relative;
      top: 1px;
    }
  }

  &.no-margin {
    margin: 0;
  }

  &.no-ui {
    border: 0;
    margin: 0;
    padding: 0;
  }

  &-first {
    margin-left: 0;
  }

  &-last {
    margin-right: 0;
  }
}

[disabled].btn-primary:disabled {
  background: $btn-primary-bg;
  color: $white;

  &:hover {
    background: $btn-primary-bg;
  }
}