/* stylelint-disable @stylistic/block-opening-brace-space-before */

/**
* Mixins to create media-queries.
*/
@use 'sass:map';

/**
* Media-query above breakpoint.
* ex: @include media-up(sm)
*/
@mixin media-up($breakpoint) {
  // If the breakpoint exists in the map.
  @if map.has-key($grid-breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map.get($grid-breakpoints, $breakpoint);

    // Write the media query.
    @media screen and (min-width: $breakpoint-value) {
      @content;
    }
  }

  // If the breakpoint doesn't exist in the map.
  @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

/**
* Media-query below breakpoint.
* ex: @include media-down(sm)
*/
@mixin media-down($breakpoint) {
  // If the breakpoint exists in the map.
  @if map.has-key($grid-breakpoints, $breakpoint) {
    // Get the breakpoint value.
    $breakpoint-value: map.get($grid-breakpoints, $breakpoint);

    // Write the media query.
    @media screen and (max-width: ($breakpoint-value - 1)) {
      @content;
    }
  }

  // If the breakpoint doesn't exist in the map.
  @else {
    @warn 'Invalid breakpoint: #{$breakpoint}.';
  }
}

/**
* Media-query between breakpoints.
* ex: @include media-between(sm, md)
*/
@mixin media-between($lower, $upper) {
  // If both the lower and upper breakpoints exist in the map.
  @if map.has-key($grid-breakpoints, $lower) and
    map.has-key($grid-breakpoints, $upper)
  {
    // Get the lower and upper breakpoints.
    $lower-breakpoint: map.get($grid-breakpoints, $lower);
    $upper-breakpoint: map.get($grid-breakpoints, $upper);

    // Write the media query.
    @media screen and (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
      @content;
    }
  }

  // If one or both of the breakpoints don't exist.
  @else {
    // If lower breakpoint is invalid.
    @if map.has-key($grid-breakpoints, $lower) == false {
      @warn 'Your lower breakpoint was invalid: #{$lower}.';
    }

    @if map.has-key($grid-breakpoints, $upper) == false {
      @warn 'Your upper breakpoint was invalid: #{$upper}.';
    }
  }
}

/**
* Media-query for touch device only.
*/
@mixin media-touch-only {
  @media screen and (hover: none) {
    @content;
  }
}

/**
* Media-query for logged in.
*/
@mixin media-logged-in {
  @media screen and (max-width: $width-admin-toolbar) {
    @content;
  }
}