@use 'sass:map';
@use 'sass:meta';
@use 'sass:string';
@use './variables';
@use './functions';

// ----------------------------------------------------------------------------------------------------
// Mediaqueries
// ----------------------------------------------------------------------------------------------------

/**
 * Inspired from https://github.com/guardian/sass-mq.git
 */

/**
 * Name your breakpoints in a way that creates a ubiquitous language
 * across team members. It will improve communication between
 * stakeholders, designers, developers, and testers.
 */
$mqBreakpoints: (
  mobile: variables.$sizeBreakpointMobilePortrait,
  mobilePortrait: variables.$sizeBreakpointMobilePortrait,
  mobileLandscape: variables.$sizeBreakpointMobileLandscape,
  tablet: variables.$sizeBreakpointTabletPortrait,
  tabletPortrait: variables.$sizeBreakpointTabletPortrait,
  tabletLandscape: variables.$sizeBreakpointTabletLandscape,
  desktop: variables.$sizeBreakpointDesktop,
  desktopLarge: variables.$sizeBreakpointDesktopLarge,
  desktop2k: variables.$sizeBreakpointDesktop2k,
  desktopMaxWidth: variables.$sizeBreakpointDesktopMaxWidth,
  desktop4k: variables.$sizeBreakpointDesktop4k,
  desktop5k: variables.$sizeBreakpointDesktop5k,
);

/**
 * Define the breakpoint from the $mqBreakpoints list that should
 * be used as the target width when outputting a static stylesheet.
 */
$mqStaticBreakpoint: mobileLandscape;

/**
 * If you want to display the currently active breakpoint in the top
 * right corner of your site during development, add the breakpoints
 * to this list, ordered by width, e.g. (mobile, tablet, desktop).
 */
$mqShowBreakpoints: (
  mobileLandscape,
  tabletPortrait,
  tabletLandscape,
  desktop,
  desktopPlus,
  desktop4k,
  desktop5k
);

@function mqGetBreakpointWidth($name) {
  @if (map.has-key($mqBreakpoints, $name)) {
    @return map.get($mqBreakpoints, $name);
  } @else {
    @warn "Breakpoint #{$name} does not exist";
  }
}

/**
 * Media Query mixin
 * Usage:
 * .element {
 *     @include mq($from: mobile) {
 *         color: red;
 *     }
 *     @include mq($to: tablet) {
 *         color: blue;
 *     }
 *     @include mq(mobile, tablet) {
 *         color: green;
 *     }
 *     @include mq($from: tablet, $and: '(orientation: landscape)') {
 *         color: teal;
 *     }
 *     @include mq(950px) {
 *         color: hotpink;
 *     }
 * }
 */
@mixin mq($from: false, $to: false, $and: false, $height: false) {
  // Initialize variables
  $minSize: 0;
  $maxSize: 0;
  $mediaQuery: '';
  $axis: if($height, 'height', 'width');

  // From: this breakpoint (inclusive)
  @if $from {
    @if meta.type-of($from) == number {
      $minSize: functions.pxToEm($from, 16);
    } @else {
      $minSize: functions.pxToEm(mqGetBreakpointWidth($from), 16);
    }
  }

  // To: that breakpoint (exclusive)
  @if $to {
    @if meta.type-of($to) == number {
      $maxSize: functions.pxToEm($to, 16) - 0.01em;
    } @else {
      $maxSize: functions.pxToEm(mqGetBreakpointWidth($to), 16) - 0.01em;
    }
  }

  // Responsive support is enabled, output rules inside @media queries
  @if $minSize != 0 {
    $mediaQuery: '#{$mediaQuery} and (min-#{$axis}: #{$minSize})';
  }
  @if $maxSize != 0 {
    $mediaQuery: '#{$mediaQuery} and (max-#{$axis}: #{$maxSize})';
  }
  @if $and {
    $mediaQuery: '#{$mediaQuery} and #{$and}';
  }

  $mediaQuery: string.unquote(#{$mediaQuery});

  @media #{all + $mediaQuery} {
    @content;
  }
}