@use "sass:map";

$ds-mq-min-width--desktop: 1025;
$ds-mq-min-width--tablet: 768;

$ds-breakpoints: (
  "desktop": (
    "min-width": $ds-mq-min-width--desktop,
  ),
  "tablet": (
    "min-width": $ds-mq-min-width--tablet,
    "max-width": $ds-mq-min-width--desktop - 1,
  ),
  "mobile": (
    "max-width": $ds-mq-min-width--tablet - 1,
  ),
);

@function buildMq($mqBase, $mqAddons: false) {
  $mq: $mqBase;
  @if $mqAddons {
    $mq: "#{$mqBase} #{$mqAddons}";
  }
  @return $mq;
}

@mixin ds-mq-smallest-breakpoint($breakpoint, $mqAddons: false) {
  $min: map.get($ds-breakpoints, $breakpoint, "min-width");
  @if $min {
    $mqBase: "(min-width: #{ds-px($min)})";
    @media #{buildMq($mqBase, $mqAddons)} {
      @content;
    }
  }
}

@mixin ds-mq-largest-breakpoint($breakpoint, $mqAddons: false) {
  $max: map.get($ds-breakpoints, $breakpoint, "max-width");
  @if $max {
    $mqBase: "(max-width: #{ds-px($max)})";
    @media #{buildMq($mqBase, $mqAddons)} {
      @content;
    }
  }
}

@mixin ds-mq-only-breakpoint($breakpoint, $mqAddons: false) {
  $min: map.get($ds-breakpoints, $breakpoint, "min-width");
  $max: map.get($ds-breakpoints, $breakpoint, "max-width");

  @if $min and $max {
    $mqBase: "(min-width: #{ds-px($min)}) and (max-width: #{ds-px($max)})";
    @media #{buildMq($mqBase, $mqAddons)} {
      @content;
    }
  } @else if $min {
    $mqBase: "(min-width: #{ds-px($min)})";
    @media #{buildMq($mqBase, $mqAddons)} {
      @content;
    }
  } @else if $max {
    $mqBase: "(max-width: #{ds-px($max)})";
    @media #{buildMq($mqBase, $mqAddons)} {
      @content;
    }
  }
}

@function ds-px($n) {
  @if $n {
    @return $n * 1px;
  }

  @return $n;
}