/***************
BUTTON DEFAULTS
***************/

@mixin button--outline($btn-color: $primary-color, $btn-font-color: white) {
  background-color: transparent;
  display: inline-block;
  position: relative;
  font-family: $sans-serif;
  text-decoration: none;
  color: $btn-color;
  font-size: 0.9em;
  line-height: 1.2em;
  font-weight: 300;
  padding: 0.5em 1.5em;
  border: 1px solid $btn-color;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 0.5em;
  transition: background-color 0.14s ease-in-out;

  // hovering on the btn
  &:hover,
  &:focus {
    color: $btn-font-color;
    text-decoration: none;
    background-color: $btn-color;
  } // end hover
} // end .button