@use 'sass:map';
@use './tokens';
@use './../spacing/tokens.scss' as spacing;

@mixin grid-max-width($width) {
  @if map.has-key(tokens.$grid-widths, $width) {
    $grid-width-value: map.get(tokens.$grid-widths, $width);

    max-width: $grid-width-value;

    @if $width == xl or $width == xxl {
      gap: spacing.$spacing-lg spacing.$spacing-lg;
    }

    @if $width == md or $width == lg {
      gap: spacing.$spacing-md spacing.$spacing-md;
    }

    @if $width == sm or $width == xs {
      gap: spacing.$spacing-sm spacing.$spacing-sm;
    }
  } @else {
    @error 'Unknown grid width of #{$width}. Accepted arguments are: "xxl", "xl", "lg", "md", "sm", "xs".';
  }
}

@mixin grid-xs-margins() {
  margin-right: spacing.$spacing-sm;
  margin-left: spacing.$spacing-sm;
}