
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

@use "../variables" as var;
@use "sass:map";

/// Media query: media type
/// @param {String} $type - Media type: all, screen, print, retina.
/// @example scss - `@media only screen` equivalent is:
/// @include media("screen");
@mixin media($type) {
  @if $type == "retina" {
    $type: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
  } @else if $type == "screen" or $type == "print" {
    $type: "only #{$type}";
  }

  @media #{$type} {
    @content;
  }
}

/// Media query: min-width / max-width or min-height / max-height
/// @param {String} $from - min size breakpoint.
/// @param {String} $until - max size breakpoint.
/// @param {String} $kind - width or height. Default: width.
/// @example scss - `@media (min-width: "md")` equivalent is:
/// @include dimensions("md");
@mixin dimensions($from: null, $until: null, $kind: "width") {
  $query: "";

  @if $from {
    @if type-of($from) == "string" {
      $size: map.get(var.$breakpoints, $from);

      @if $kind == "width" {
        $query: "(min-width: #{$size})";
      } @else if $kind == "height" {
        $query: "(min-height: #{$size})";
      } @else {
        @error "`$kind` must be either width or height.";
      }
    } @else {
      @error "`$from` must be a string.";
    }
  }

  @if $from and $until {
    $query: $query + " and ";
  }

  @if $until {
    @if type-of($until) == "string" {
      $size: map.get(var.$breakpoints, $until);
      $size: calc(#{$size} - 1px);

      @if $kind == "width" {
        $query: $query + "(max-width: #{$size})";
      } @else if $kind == "height" {
        $query: $query + "(max-height: #{$size})";
      } @else {
        @error "`$kind` must be either width or height.";
      }
    } @else {
      @error "`$until` must be a string.";
    }
  }

  @media #{$query} {
    @content;
  }
}

/// Media query: prefers-reduced-motion
/// @param {String} $value - Media query value: `no-preference` or `reduce`.
/// @example scss - @media (prefers-reduced-motion: "reduce") equivalent is:
/// @include motion("reduce");
@mixin motion($value) {
  @if $value == "no-preference" or $value == "reduce" {
    @media (prefers-reduced-motion: #{$value}) {
      @content;
    }
  } @else {
    @error "Allowed values are `no-preference` and `reduce`.";
  }
}

/// Media query: any-pointer
/// @param {String} $value - Media query value: `fine`, `coarse` or `none`.
/// @example scss - @media (any-pointer: "fine") equivalent is:
/// @include pointer("fine");
@mixin pointer($value) {
  @if $value == "fine" or $value == "coarse" or $value == "none" {
    @media (any-pointer: #{$value}) {
      @content;
    }
  } @else {
    @error "Allowed values are `fine`, `coarse` and `none`.";
  }
}