.boxShadowHelper(@level: sm, @direction: none) {
  & when (@level = sm) {
    //cards
    box-shadow: @elevation-sm;
    & when (@direction = border){
      box-shadow: @elevation-sm, var(--c8y-elevation-border);
    }
  }
 
  & when (@level = md) {
    // right-drawer
    box-shadow: @elevation-md-bottom;
    & when (@direction = right) {
      box-shadow: @elevation-md-right;
    }
    & when (@direction = left) {
      box-shadow: @elevation-md-left;
    }
    & when (@direction = top) {
      box-shadow: @elevation-md-top;
    }
  }
  & when (@level = lg) {
    box-shadow: @elevation-lg;
    & when (@direction = right) {
      // dropdown inside raised components
      box-shadow: @elevation-lg-right;
    }
  }
  & when (@level = hover) {
    // card hover
    box-shadow: @elevation-hover;
  }
}

// borders
.shadow-border(@pos; @color;) {
  box-shadow: inset 0 @pos 0 0 @color;
}
.shadow-scroll {
  box-shadow: 0 2px 3px fade(black, 10%);
}