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

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

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

  background-color: transparent;
  border: 0;
  cursor: pointer;
  outline: 0;
  -webkit-appearance: none;
  transition: all 0.3s;

  /**
   * A standard button
   */
  &--standard {
    padding: 0 50px;
    height: 50px;
    font: {
      family: $body-font;
      weight: 700;
      size: font-size(13);
    }
    color: #fff;
    line-height: 50px;
    background: {
      color: $brand;
    }
    text-transform: uppercase;
    border-radius: 50px;

    @include states {
      color: #fff;
      background: {
        color: darken($brand, 5%);
      }
    }
  }

  &--alt {
    background: #323232;

    @include states {
      background: {
        color: darken(#323232, 5%);
      }
    }
  }

  &--small {
    height: 40px;
    line-height: 40px;
  }

  /**
   * A branded button that uses the main brand colour as the background
   */
  &--brand {
    background: {
      color: $brand;
    }

    @include states {
      color: #fff;
      background: {
        color: darken($brand, 5%);
      }
    }
  }

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

}