MontrealNewTech/website

@mixin button($color: $main-color) {
  background: $color;
  border-radius: $base-border-radius;
  box-sizing: border-box;
  border: 1px solid darken($color, 8%);
  color: set-text-color($color);
  cursor: pointer;
  display: inline-block;
  font-family: $headers;
  font-size: $base-font-size;
  letter-spacing: 2px;
  margin: $little-space 0;
  padding: $little-space $med-space;
  text-transform: uppercase;
  white-space: normal;

  a {
    color: $background-color;
  }

  &:hover {
    background: darken($color, 5%);
    transition: all $long-duration $base-timing;
  }

  &:active {
    background: darken($color, 15%);
  }

  &:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }

  &:focus {
    outline: none;
  }
}

button,
input[type='submit'],
.button {
  @include button($color: $buttons);
}

.outline-button {
  @include button($color: transparent);
  border: $main-color-border;
  color: $main-color;
}