$default-shadow-color: rgb(var(--cds-alpha-silver-200));

@mixin cds-shadow-top-100($color: $default-shadow-color) {
  box-shadow: 0 var(--cds-shadow-y-minus-100) var(--cds-shadow-blur-200) 0 $color;
}

@mixin cds-shadow-left-100($color: $default-shadow-color) {
  box-shadow: var(--cds-shadow-x-minus-100) 0 var(--cds-shadow-blur-200) 0 $color;
}

@mixin cds-shadow-right-100($color: $default-shadow-color) {
  box-shadow: var(--cds-shadow-x-100) 0 var(--cds-shadow-blur-200) 0 $color;
}

@mixin cds-shadow-bottom-100($color: $default-shadow-color) {
  box-shadow: 0 var(--cds-shadow-y-100) var(--cds-shadow-blur-200) 0 $color;
}

@mixin cds-shadow-bottom-200($color: $default-shadow-color) {
  box-shadow: 0 var(--cds-shadow-y-200) var(--cds-shadow-blur-300) 0 $color;
}

@mixin cds-shadow-bottom-300($color: $default-shadow-color) {
  box-shadow: 0 var(--cds-shadow-y-300) var(--cds-shadow-blur-400) 0 $color;
}

@mixin cds-shadow-border($color: $default-shadow-color, $size: 2px, $opacity: 0.2) {
  box-shadow: 0 0 0 $size rgba-with-alpha($color, $opacity);
  border-color: $color;
}

@function rgba-with-alpha($color, $alpha) {
  @if type-of($color) == 'string' {
    @if str-index($color, 'rgb') {
      $new-color: unquote("rgba(#{str-slice($color, 5, -2)}, #{$alpha})");
      @return $new-color;
    } @else {
      @warn "Expected a string containing 'rgb', but got #{$color}";
      @return null;
    }
  } @else {
    @warn "Expected a string, but got #{$color}";
    @return null;
  }
}
