@import '../variables/colors';

$card-padding-top: 12px;
$card-padding-right: 16px;
$card-padding-bottom: 12px;
$card-padding-left: 16px;

@mixin shadow($level: 1) {
  @if $level == 0 {
    box-shadow: none;
  } @else if $level == 1 {
    box-shadow: 0px 6px 8px rgba(0, 0, 0, 0.02);
  } @else if $level == 2 {
    box-shadow: 0px 2px 4px rgba(18, 52, 77, 0.06);
  } @else if $level == 3 {
    box-shadow: 0px 2px 16px rgba(18, 52, 77, 0.16);
  } @else {
    @warn "Invalid elevation $level `#{$level}`.";
  }
}

@mixin card($level: 1, $corner: 8px) {
  background: $color-milk;
  padding-block-start: $card-padding-top;
  padding-inline-end: $card-padding-right;
  padding-block-end: $card-padding-bottom;
  padding-inline-start: $card-padding-left;
  border: 1px solid $color-smoke-50;
  border-radius: $corner;
  @include shadow($level);
}
