@mixin text-gradient($origin,$start,$end) {
  display: inline-block;
  color: $origin;
  @if $enable-gradients {
    background-image: -webkit-linear-gradient($start 0%, $end 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
@mixin bg-gradient($background,$background-gradient) {
  @if $enable-gradients {
    background-color: $background;
    background-image: linear-gradient(nth($background-gradient,1), nth($background-gradient,2) 0%, nth($background-gradient,3) 100%);
  } @else {
    background-color: $background;
  }
}

@mixin bg-gradient-inverse($background,$background-gradient) {
  @if $enable-gradients {
    background-color: $background;
    background-image: linear-gradient(nth($background-gradient,1), nth($background-gradient,3) 0%, nth($background-gradient,2) 100%);
  } @else {
    background-color: $background;
  }
}

@mixin hover-gradient($background,$background-gradient) {
  @if $enable-gradients {
    background-image: linear-gradient(nth($background-gradient,1), lighten(nth($background-gradient,2), 4.9%) 0%, lighten(nth($background-gradient,3), 11.5%) 100%);
  } @else {
    background-color: fade-out($background,.2);
  }
}

@mixin active-gradient($background,$background-gradient) {
  border-color: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .2);
  @include bg-gradient($background,$background-gradient);
}

%gradient-primary {
  @include bg-gradient($brand-primary,$brand-gradient-primary);
}

%gradient-primary-inverse {
  @include bg-gradient-inverse($brand-primary,$brand-gradient-primary);
}

%gradient-purple {
  @include bg-gradient($brand-primary,$brand-gradient-primary);
}

%gradient-yellow {
  @include bg-gradient($brand-warning,$brand-gradient-warning);
}

%gradient-green {
  @include bg-gradient($brand-success,$brand-gradient-success);
}

%gradient-red {
  @include bg-gradient($brand-danger,$brand-gradient-danger);
}

%gradient-blue {
  @include bg-gradient($brand-info,$brand-gradient-info);
}