@mixin valo-gradient($color: $v-background-color, $gradient: $v-gradient, $fallback: null, $direction: to bottom) {
  @if $color {
    @if $gradient {
      $color-stops: valo-gradient-color-stops($color, $gradient);
      @include linear-gradient($direction, $color-stops, $fallback: $fallback or $color);
    } @else {
      background: $fallback or $color;
    }
  }
}

@function valo-gradient-color-stops($color, $gradient: $v-gradient) {
  $style: valo-gradient-style($gradient);
  $opacity: valo-gradient-opacity($gradient);

  @if $style != none and $opacity > 0 {
    @if $style == v-linear or $style == v-linear-reverse {
      $start: blend-overlay(rgba(#fff, $opacity/100%), $color);
      $end: blend-overlay(rgba(#000, max(0, $opacity/100%)), $color);
      $end: blend-multiply(rgba(#000, max(0, $opacity/200%)), $end);

      @if $style == v-linear {
        @return $start 2%, $end 98%;
      } @else {
        @return $end 2%, $start 98%;
      }
    }
  }

  @return $color 0%, $color 100%;
}


@function valo-gradient-style($gradient: $v-gradient) {
  @if type-of($gradient) != list {
    @return none;
  }
  @return first-string($gradient);
}

@function valo-gradient-opacity($gradient: $v-gradient) {
  @if type-of($gradient) != list {
    @return 0%;
  }
  @return first-number($gradient);
}