@mixin button-wrapper {
  position: relative;
  display: inline-block;
}

@mixin button(
  $bg-color: #29d,
  $text-color: #fff,
  $text-shadow: none,
  $padding: 1em 2em,
  $border-radius: 0,
  $use-border: false,
  $border-width: 1px,
  $border-color: #29d
  ) {
  display: inline-block;
  padding: $padding;
  background-color: $bg-color;
  @if ($use-border and $border-color) {
    border: $border-width solid $border-color;
  } @else {
    border: 0;
  }
  border-radius: $border-radius;
  color: $text-color;
  text-shadow: $text-shadow;
  text-decoration: none;
  line-height: normal;
  cursor: pointer;
  &:focus {
    box-shadow: none;
  }
  &:active {
    transform: translateY(1px);
  }
  &:disabled {
    background-color: rgba($bg-color, .45) !important;
    @if ($use-border and $border-color) {
      border: $border-width solid rgba($border-color, .45) !important;
    } @else {
      border: 0 !important;
    }
    color: rgba(0, 0, 0, 0) !important;
    text-shadow: none !important;
  }
}

@mixin ghost-button(
  $color: #29d,
  $padding: 1em 2em,
  $border-width: 1px,
  $border-radius: 0
  ) {
  @include button(
    $bg-color: transparent,
    $text-color: $color,
    $padding: $padding,
    $border-radius: $border-radius,
    $use-border: true,
    $border-width: $border-width,
    $border-color: $color
  );
}

@mixin triangle($triangle-size, $triangle-color, $triangle-direction) {
  display: block;
  width: 0;
  height: 0;
  content: "";
  border: inset $triangle-size;
  @if ($triangle-direction == top) {
    border-color: transparent transparent $triangle-color transparent;
    border-bottom-style: solid;
  } @else if ($triangle-direction == right) {
    border-color: transparent transparent transparent $triangle-color;
    border-left-style: solid;
  } @else if ($triangle-direction == bottom) {
    border-color: $triangle-color transparent transparent transparent;
    border-top-style: solid;
  } @else if ($triangle-direction == left) {
    border-color: transparent $triangle-color transparent transparent;
    border-right-style: solid;
  }
}
