@mixin shadow($level: 1, $shadow-color: palette(blue, x-dark)) {
  @if $level == 1 {
    box-shadow: 0 1px 3px rgba($shadow-color, 0.12), 0 1px 2px rgba($shadow-color, 0.24);
  }

  @else if $level == 2 {
    box-shadow: 0 3px 6px rgba($shadow-color, 0.12), 0 3px 6px rgba($shadow-color, 0.18);
  }

  @else if $level == 3 {
    box-shadow: 0 10px 20px rgba($shadow-color, 0.1), 0 6px 6px rgba($shadow-color, 0.14);
  }

  @else if $level == 4 {
    box-shadow: 0 14px 28px rgba($shadow-color, 0.15), 0 10px 10px rgba($shadow-color, 0.1);
  }

  @else if $level == 5 {
    box-shadow: 0 19px 38px rgba($shadow-color, 0.2), 0 15px 12px rgba($shadow-color, 0.06);
  }
}
$shadow-levels: 1, 2, 3, 4, 5;

@each $level in $shadow-levels {
  .shadow--#{$level} {
    @include shadow($level);
  }

  .shadow--#{$level}-hover {
    @include pop();

    &:hover {
      @if ($level < 5) {
        @include shadow($level + 1);

        transform: translateY(-#{$level + 1}px);
      }

      @else {
        @include shadow($level);

        transform: translateY(-#{$level}px);
      }
    }
  }
}