@use 'sass:list';

/*
  @include card([
    (0 "full" (0 0) (0 0)))
  ]);

  @include card([
    ($bpMinWidth $bpMaxWidth (width height) (margWidth margHeight)
  ]);
*/
@mixin card($cardBpColumns: []) {
  display: inline-block;

  @if list.length($cardBpColumns) > 0 {
    @for $cardBpIndex from 1 through list.length($cardBpColumns) {
      $bp: list.nth($cardBpColumns, $cardBpIndex);
      @include breakpoint('screen', list.nth($bp, 1), list.nth($bp, 2)) {
        $size: list.nth($bp, 3);
        width: list.nth($size, 1);
        @if list.length($size) == 2 {
          height: list.nth($size, 2);
        }
        @if list.length($bp) == 4 {
          $margin: list.nth($bp, 4);
          margin-top: list.nth($margin, 1);
          margin-bottom: list.nth($margin, 1);
          @if list.length($margin) == 2 {
            margin-left: list.nth($margin, 2);
            margin-right: list.nth($margin, 2);
          }
        }
      }
    }
  }
}