@use './Breakpoints.scss' as bp;

$desktop-columns: map-get(bp.$desktop, 'columns');


@mixin grid--desktop($columns: 0) {
  @if ($columns != 0) {
    --z-grid--columns:        #{$columns};
  }

  width: calc(
    (var(--z-grid--columns-width) * var(--z-grid--columns)) + 
    (var(--z-grid--columns-gutter) * (var(--z-grid--columns) - 1))
  );
}

@mixin grid--landscape($columns: 0) {
  --z-grid--columns-width:  #{map-get(bp.$landscape, 'column-width')} !important;

  @if ($columns != 0) {
    --z-grid--columns:        #{$columns} !important;
  }
  @else if (map-get(bp.$landscape, 'columns') != $desktop-columns) {
    --z-grid--columns:        #{map-get(bp.$landscape, 'columns')} !important;
  }
}

@mixin grid--portrait($columns: 0) {
  --z-grid--columns-width:  #{map-get(bp.$portrait, 'column-width')} !important;

  @if ($columns != 0) {
    --z-grid--columns:        #{$columns} !important;
  }
  @else if (map-get(bp.$portrait, 'columns') != $desktop-columns) {
    --z-grid--columns:        #{map-get(bp.$portrait, 'columns')} !important;
  }
}


@mixin grid--mobile($columns: 0) {
  --z-grid--columns-width:  #{map-get(bp.$mobile, 'column-width')} !important;

  @if ($columns != 0) {
    --z-grid--columns:        #{$columns} !important;
  }
  @else if (map-get(bp.$mobile, 'columns') != $desktop-columns) {
    --z-grid--columns:        #{map-get(bp.$mobile, 'columns')} !important;
  }

  min-width:        calc(100% - 3.75rem) !important;
}