$secondary-gradient-start: #efefef !default;
$secondary-gradient-stop: #dfe1e2 !default;

@mixin gradient($start, $end){
  background-color: $start;
  background-image: linear-gradient(180deg, $start, $end);
}

@mixin primary-gradient {
  @include gradient(lighten($primary-color, 5%), darken($primary-color, 7%));
  border-bottom: 1px solid darken($primary-color, 11%);
}

@mixin secondary-gradient {
  @include gradient($secondary-gradient-start, $secondary-gradient-stop);
}

@mixin highlight-gradient {
  @include gradient(#75a1c2, #608cb4);
}

@mixin reverse-highlight-gradient {
  @include gradient(#608cb4, #75a1c2);
}

@mixin no-gradient {
  background: none;
}