/**
*
* Button
*
**/

.button {
  display: inline-block;
  padding: (($lineHeight / 2) - 1) 32px;
  margin-bottom: $lineHeight / 2;
  margin-top: $lineHeight / 2;
  min-height: $lineHeight;

  text-align: center;

  font-family: $fontHighlight;
  font-weight: 600;
  text-decoration: none;

  outline: 0;

  transition: none;

  &:hover {
    background: #4d4d4d;
    color: #ffffff;
    border: 1px solid #4d4d4d;
    text-decoration: none;
  }
}

// Mixin to create buttons
@mixin style-button($color, $textColor, $isInverted: false) {

  background: $color;
  color: $textColor;
  border: 1px solid darken($color, 10%);

  @if $isInverted { border-color: transparent;}
}


.button--primary {
  @extend .button;
  @include style-button(#4285f4, #ffffff);
}

.button--secondary {
  @extend .button;
  @include style-button(#ffffff, $colorBlue);
}

.button--secondary-variation {
  @extend .button;
  @include style-button(#ffffff, $colorBlue, true);
}