@use '../functions/color' as *;

/*
  The mixin includes the `box-shadow` of the specified side, size, and color.
  The side can be `bottom`, `left`, `right`, `top`, size default is 10px and color default is `gray-color`.
*/
@mixin box-shadow-side($side, $size: 10px, $color: 'gray-color') {
  @if $side == right {
    // Right side.
    box-shadow: $size 0 $size ($size * -1) color($color);
  } @else if $side == left {
    // Left side.
    box-shadow: ($size * -1) 0 $size ($size * -1) color($color);
  } @else if $side == bottom {
    // Bottom side.
    box-shadow: 0 $size $size ($size * -1) color($color);
  } @else if $side == top {
    // Top side.
    box-shadow: 0 ($size * -1) $size ($size * -1) color($color);
  } @else {
    @error "Unknown side #{$side}.";
  }
}