// Small tablets and large smartphones (landscape view)
// https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2
// http://javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
$screen-sm-min: 576px;

// Small tablets (portrait view)
$screen-md-min: 768px;

// Tablets and small desktops
$screen-lg-min: 992px;

// Large tablets and desktops
$screen-xl-min: 1200px;

// Small devices
@mixin sm {
   @media (min-width: #{$screen-sm-min}) {
      @content;
   }
}

// Medium devices
@mixin md {
   @media (min-width: #{$screen-md-min}) {
      @content;
   }
}

// Large devices
@mixin lg {
   @media (min-width: #{$screen-lg-min}) {
      @content;
   }
}

// Extra large devices
@mixin xl {
   @media (min-width: #{$screen-xl-min}) {
      @content;
   }
}

@mixin rwd($screen) {
   @media (min-width: $screen+'px') {
      @content;
   }
}

@mixin svg-color($color) {
   toba-svg {
      svg,
      svg > use {
         stroke: $color;
         fill: $color;

         &.no-fill {
            fill: none;
         }
         &.no-stroke {
            stroke: none;
         }
      }
   }
}

@mixin darkMode() {
   --text-color: hsl(var(--text-hue), 0%, 80%);
   --background-color: hsl(var(--background-hue), 2%, 15%);
   --link-color: var(--primary-color);
}