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

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

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

@define-mixin secondary-gradient {
  @mixin gradient $secondary-gradient-start, $secondary-gradient-stop;
}

@define-mixin highlight-gradient {
  @mixin gradient #75a1c2, #608cb4;
}

@define-mixin reverse-highlight-gradient {
  @mixin gradient #608cb4, #75a1c2;
}

@define-mixin no-gradient {
  background: none;
}