@mixin gradient (
  $direction: 0deg,
  $color1: #000,
  $color2: translucent($color1)
) {
  background-image: linear-gradient(
    $direction,
    $color1,
    $color2
  );
}

@mixin vertical-gradient ($color1: null, $color2: null) {
  @include gradient(0deg, $color1, $color2);
}

@mixin reverse-vertical-gradient ($color1: null, $color2: null) {
  @include gradient(180deg, $color1, $color2);
}

@mixin horizontal-gradient ($color1: null, $color2: null) {
  @include gradient(90deg, $color1, $color2);
}

@mixin reverse-horizontal-gradient ($color1: null, $color2: null) {
  @include gradient(270deg, $color1, $color2);
}

@mixin gradient-dark ($direction: 0deg, $opacity1: 0, $opacity2: 1) {
  @include gradient($direction, translucent($dark, $opacity1), translucent($dark, $opacity2));
}

@mixin gradient-white ($direction: 0deg, $opacity1: 0, $opacity2: 1) {
  @include gradient($direction, translucent($white, $opacity1), translucent($white, $opacity2));
}