//
// Mixins for box-shadow
//

// Material box-shadow
@mixin box-shadow-helper($level) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24);
  } @else if $level == 2 {
    box-shadow: 0 3px 6px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
  } @else if $level == 3 {
    box-shadow: 0 10px 20px rgba(0, 0, 0, .19), 0 6px 6px rgba(0, 0, 0, .23);
  } @else if $level == 4 {
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25), 0 10px 10px rgba(0, 0, 0, .22);
  } @else if $level == 5 {
    box-shadow: 0 19px 38px rgba(0, 0, 0, .3), 0 15px 12px rgba(0, 0, 0, .22);
  }
}

// Material box-shadow v2
@mixin box-shadow-helper-two($level) {
  @if $level == 1 {
    box-shadow: 0 1px 2px rgba(0, 0, 0, .15);
  } @else if $level == 2 {
    box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
  }
}

// Box-shadow used on stripe.com
@mixin box-shadow-stripe($level) {
  @if $level == 1 {
    box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07);
  } @else if level == 2 {
    box-shadow: 0 18px 35px rgba(50, 50, 93, .1), 0 8px 15px rgba(0, 0, 0, .07);
  }
}

// Box-shadow used on facebook.design
@mixin box-shadow-facebookdesign($level) {
  @if $level == 1 {
    box-shadow: 0 20px 20px rgba(0, 0, 0, .08);
  } @else if $level == 2 {
    box-shadow: 0 40px 40px rgba(0, 0, 0, .16);
  }
}

// Box-shadow used on tailwindcss.com
@mixin box-shadow-tailwindcss($level) {
  @if $level == 1 {
    box-shadow: 0 2px 4px 0 rgba(0, 0 , 0 , .1);
  } @if $level == 2 {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .12), 0 2px 4px 0 rgba(0, 0, 0, .08);
  } @if $level == 3 {
    box-shadow: 0 15px 30px 0 rgba(0, 0, 0, .11), 0 5px 15px 0 rgba(0, 0, 0, .08);
  }
}

// Box-shadow used on supernova
@mixin box-shadow-supernova($level) {
  @if $level == 1 {
    box-shadow: 0 5px 10px rgba(0, 0, 77, .16);
  } @if $level == 2 {
    box-shadow: 0 15px 10px rgba(0, 0, 77, .16);
  }
}

// Box-shadow used on kinsta.com
@mixin box-shadow-kinsta($level) {
  @if $level == 1 {
    box-shadow: 0px 10px 40px 0px rgba(47,47,47,0.1);
  }
}

// Box-shadow used on udacity.com
@mixin box-shadow-udacity($level) {
  @if $level == 1 {
    box-shadow: 12px 15px 20px rgba(0, 0, 0, .1);
  } @if $level == 2 {
    box-shadow: 2px 4px 8px 0 rgba(0, 0, 0, .1);
  }
}