/*------------------------------------*\
  $BUTTONS
\*------------------------------------*/

%btn,
.btn,
button,
.button {
  margin: 0;
  padding: 0;
  display: inline-block;
  vertical-align: middle;
  overflow: visible;

  font: inherit;
  text-decoration: none;
  text-align: center;

  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;

  padding: 15px 20px;
  font: {
    family: $heading-font;
    weight: bold;
    size: font-size(14);
  }
  background: {
    color: $brand;
  }
  color: $white;
  border: 1px solid darken($brand, 5%);
  border-radius: 6px;

  line-height: 1;

  @include states {
    color: $white;
    text-decoration: none;
    background: darken($brand, 5%);
  }

  aside & {
    margin: {
      right: 10px;
    }
  }

  /**
   * A full width button
   */
  &--full {
    width: 100%;
  }

  &--success {
    background: #5cb85c;
    border-color: #4cae4c;
    color: $white;

    @include states {
      background: #4cae4c;
      color: $white;
    }
  }

  &--warning {
    background: #f0ad4e;
    border-color: #eea236;
    color: $white;

    @include states {
      background: #eea236;
      color: $white;
    }
  }

  &--danger {
    background: #d9534f;
    border-color: #d43f3a;
    color: $white;

    @include states {
      background: #d43f3a;
      color: $white;
    }
  }

  .actions & {
    float: left;
    margin: {
      right: 10px;
      bottom: 10px;
    }
    padding: 10px 15px;
    font: {
      size: font-size(13);
    }

    table & {
      margin: {
        bottom: 0;
      }
      font: {
        size: font-size(13);
      }
      padding: 7.5px 10px;
    }

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

}