@use "sass:map";

$view-sizes: (
  mobile: (
    min: 0,
    max: 767px
  ),
  tablet: (
    min: 768px,
    max: 1023px
  ),
  desktop: (
    min: 1024px,
    max: 1000000000px
  )
);

@mixin view-mobile($context: 'screen') {
  $size: 'mobile';
  @media #{$context} and (max-width: map.get(map.get($view-sizes, $size), max)) {
    @content;
  }
}

@mixin view-tablet($context: 'screen') {
  $size: 'tablet';
  @media #{$context} and (min-width: map.get(map.get($view-sizes, $size), min)) and (max-width: map.get(map.get($view-sizes, $size), max)) {
    @content;
  }
}

@mixin view-tablet-and-down($context: 'screen') {
  $size: 'tablet';
  @media #{$context} and (max-width: map.get(map.get($view-sizes, $size), max)) {
    @content;
  }
}

@mixin view-tablet-and-up($context: 'screen') {
  $size: 'tablet';
  @media #{$context} and (min-width: map.get(map.get($view-sizes, $size), min)) {
    @content;
  }
}

@mixin view-desktop($context: 'screen') {
  $size: 'desktop';
  @media #{$context} and (min-width: map.get(map.get($view-sizes, $size), min)) {
    @content;
  }
}