//
// calculate the gradient color by the base color
//

@function gradient-color($deg,$basecolor) {
  $color-h:round(hue($basecolor));
  $color-s:round(saturation($basecolor));
  $color-l:round(lightness($basecolor));

  $color-start-h:0;
  $color-start-l:0;

  $color-end-h:0;
  $color-end-l:0;

  @if ( ($color-h>=71 and $color-h<=94) or ($color-h>=125 and $color-h <= 144) or ($color-h>=210 and $color-h <= 250) or ($color-h>=310 and $color-h <= 339)) {
    $color-start-h : $color-h + 14;
    $color-start-l : $color-l + 1;
    $color-end-h : $color-h - 10;
    $color-end-l : $color-l - 6;
  }

  @if( ($color-h>=340 and $color-h<=360) or ($color-h>=0 and $color-h<=70) or ($color-h>=95 and $color-h<=124) or ($color-h>=145 and $color-h<=179) or ($color-h>=251 and $color-h<=309)){
    $color-start-h : $color-h - 8;
    $color-start-l : $color-l + 5;
    $color-end-h : $color-h + 8;
    $color-end-l : $color-l - 5;
  }

  @if(($color-h>=180 and $color-h<=209)){
    $color-start-h : $color-h + 8;
    $color-start-l : $color-l + 5;
    $color-end-h : $color-h - 8;
    $color-end-l : $color-l - 3;
  }

  $gradient-color:$deg hsl($color-start-h,$color-s,$color-start-l) hsl($color-end-h,$color-s,$color-end-l);
  @return $gradient-color;
}

//
// gray color mixed with three colors
//

@function gray-color($primary-color,$white-color,$gray-color,$p-opacity,$w-opacity){
  $mx1: mix($white-color,$gray-color,$w-opacity);
  $mx2: mix($primary-color,$mx1,$p-opacity);
  @return $mx2;
}


//
// primary color mixed with two colors
//

@function primary-color($primary,$p-opacity){
  $white-color:#fff;
  $mx: mix($primary,$white-color,$p-opacity);
  @return $mx;
}