@use "sass:map";

$breakpoints: (
  "xs": 24rem,
  "xs-y": 45rem,
  "md": 48rem,
  "lg": 75rem,
  "xl": 112rem
) !default;

@mixin mq-below-above-for-breakpoint($breakpoint, $direction: "below") {
  $operator: max-width;

  @if $direction == "above" {
    $operator: min-width;
  }

  @media screen and (#{$operator}: map.get($breakpoints, $breakpoint)) {
    @content;
  }
}

@mixin mq-below-above-for-breakpoint-x-and-y($breakpoint-x, $breakpoint-y, $direction: "below") {
  $operator-x: max-width;
  $operator-y: max-height;

  @if $direction == "above" {
    $operator-x: min-width;
    $operator-y: min-height;
  }

  /* stylelint-disable-next-line max-line-length */
  @media screen and (#{$operator-x}: map.get($breakpoints, $breakpoint-x)) and (#{$operator-y}: map.get($breakpoints, $breakpoint-y)) {
    @content;
  }
}

@mixin mq-xs($direction: "below") {
  @include mq-below-above-for-breakpoint("xs", $direction) {
    @content;
  }
}

@mixin mq-mobile($direction: "below") {
  @include mq-below-above-for-breakpoint-x-and-y("xs", "xs-y", $direction) {
    @content;
  }
}

@mixin mq-md($direction: "below") {
  @include mq-below-above-for-breakpoint("md", $direction) {
    @content;
  }
}

@mixin mq-lg($direction: "below") {
  @include mq-below-above-for-breakpoint("lg", $direction) {
    @content;
  }
}

@mixin mq-xl($direction: "below") {
  @include mq-below-above-for-breakpoint("xl", $direction) {
    @content;
  }
}

@mixin portrait($max-width: false) {
  @if $max-width {
    @media screen and (orientation: portrait) and (max-width: $max-width) { @content; }
  } @else{
    @media screen and (orientation: portrait) { @content; }
  }
}

@mixin landscape($min-width: false) {
  @if $min-width {
    @media screen and (orientation: landscape) and (min-width: $min-width) { @content; }
  } @else{
    @media screen and (orientation: landscape) { @content; }
  }
}