@use "sass:map";
@use "../variables/spacing";

@mixin media-query($min, $max: null) {
  @if $min and $max {
    @media (min-width: #{map.get(spacing.$container, $min)}) and (max-width: #{map.get(spacing.$container, $max)-1}) {
      @content;
    }
  } @else if $min {
    @media (min-width: #{map.get(spacing.$container, $min)}) {
      @content;
    }
  } @else if $max {
    @media (max-width: #{map.get(spacing.$container, $max)-1}) {
      @content;
    }
  }
}

@mixin container-query($min, $max: null) {
  @if $min and $max {
    @container (min-width: #{map.get(spacing.$container, $min)}) and (max-width: #{map.get(spacing.$container, $max)-1}) {
      @content;
    }
  } @else if $min {
    @container (min-width: #{map.get(spacing.$container, $min)}) {
      @content;
    }
  } @else if $max {
    @container (max-width: #{map.get(spacing.$container, $max)-1}) {
      @content;
    }
  }
}

@mixin gap {
  gap: var(--zn-gap, 0);
}

@mixin gap-sm {
  --zn-gap: var(--zn-spacing-small, 0);
  gap: var(--zn-gap, 0);
}

@mixin padding {
  padding: var(--zn-spacing-medium, 0);
}

@function spacing($size, $default: sm) {
  @if map.has-key(spacing.$spacing, $size) {
    @return map.get(spacing.$spacing, $size);
  } @else {
    @warn "Unknown spacing size `#{$size}`. Using default `#{$default}`.";
    @return map.get(spacing.$spacing, $default);
  }
}

@function reduce($size, $ratio) {
  @return $size * $ratio;
}

@function common-size($size) {
  @if map.has-key(spacing.$common-sizes, $size) {
    @return map.get(spacing.$common-sizes, $size);
  } @else {
    @warn "Unknown common size `#{$size}`.";
  }
}

@function container-width($size) {
  @if map.has-key(spacing.$container, $size) {
    @return map.get(spacing.$container, $size);
  } @else {
    @warn "Unknown container size `#{$size}`.";
  }
}


@mixin page-content {
  display: flex;
  flex-direction: column;
  align-items: normal;
  @include gap;
}