////
/// Microscope(-sass) responsive library.
/// @group responsive
////

/// @name Import responsive library.
/// @example @import '~microscope-sass/lib/responsive';

@import 'util';


///
$breakpoint-mobile-s: 320px !default;
///
$breakpoint-mobile-m: 375px !default;
///
$breakpoint-mobile-l: 425px !default;

///
$breakpoint-tablet: 768px !default;

///
$breakpoint-laptop: 992px !default;
///
$breakpoint-desktop: 1200px !default;

///
$responsive-default-media: all !default;


/// Wraps content block in a media query based on `$min`, `$max` and `$media`.
/// If either $min and/or $max is set to null (default) the specific expression is not set.
///
/// @param {number (with unit)} $min [null] - Minimal screen width.
/// @param {number (with unit)} $max [null] - Maximum screen width.
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
/// @content Rules to apply when screen size meets condition.
@mixin breakpoint($min: null, $max: null, $media: $responsive-default-media) {

  @if $min and not $max {
    @media #{$media} and (min-width: $min) {
      @content;
    }
  }

  @if not $min and $max {
    @media #{$media} and (max-width: $max) {
      @content;
    }
  }

  @if $min and $max {
    @media #{$media} and (min-width: $min) and (max-width: $max) {
      @content;
    }
  }
}


/// Applies specific value to all `$properties` based on active breakpoint.
/// Requires at least, `$value-mobile` and `$value-tablet` to be set.
/// If any value is the same as the previous, or set to null (default), no media query is generated and styling relies
/// on inheritance of the previous breakpoint.
///
/// @param {list | string} $properties - One or more properties to set.
/// @param {string} $value-mobile - The mobile value.
/// @param {string} $value-tablet - The tablet value.
/// @param {string} $value-laptop [null] - The laptop value.
/// @param {string} $value-desktop [null] - The desktop value.
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
@mixin responsive($properties, $value-mobile, $value-tablet, $value-laptop: null, $value-desktop: null, $media: $responsive-default-media) {
  @include properties($properties, $value-mobile);

  @if $value-tablet and $value-tablet != $value-mobile {
    @include tablet {
      @include properties($properties, $value-tablet);
    }
  }

  @if $value-laptop and $value-laptop != $value-tablet {
    @include laptop {
      @include properties($properties, $value-laptop);
    }
  }

  @if $value-desktop and $value-desktop != $value-laptop {
    @include desktop {
      @include properties($properties, $value-desktop);
    }
  }
}


/// Wraps content block in a media query matching screen sizes smaller than `$breakpoint-tablet` (mobile).
///
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
/// @content Rules to apply when screen size meets condition.
@mixin mobile-only($media: $responsive-default-media) {
  @include breakpoint($max: $breakpoint-tablet - 1px, $media: $media) {
    @content;
  }
}


/// Wraps content block in a media query matching screen sizes larger or equal than `$breakpoint-tablet`.
///
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
/// @content Rules to apply when screen size meets condition.
@mixin tablet($only: false, $media: $responsive-default-media) {
  @if $only == false {
    @include breakpoint($breakpoint-tablet, $media: $media) {
      @content;
    }
  } @else {
    @include breakpoint($breakpoint-tablet, $breakpoint-laptop - 1px, $media: $media) {
      @content;
    }
  }
}


/// Wraps content block in a media query matching screen sizes larger or equal than `$breakpoint-laptop`.
///
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
/// @content Rules to apply when screen size meets condition.
@mixin laptop($only: false, $media: $responsive-default-media) {
  @if $only == false {
    @include breakpoint($breakpoint-laptop, $media: $media) {
      @content;
    }
  } @else {
    @include breakpoint($breakpoint-laptop, $breakpoint-desktop - 1px, $media: $media) {
      @content;
    }
  }
}


/// Wraps content block in a media query matching screen sizes larger or equal than `$breakpoint-desktop`.
///
/// @param {string} $media [$responsive-default-media] - Media (e.g. all, screen or print).
/// @content Rules to apply when screen size meets condition.
@mixin desktop($media: $responsive-default-media) {
  @include breakpoint($breakpoint-desktop, $media: $media) {
    @content;
  }
}


/// Hides element (`display: none;`) by default, only showing it on mobile screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @content Rules to apply when screen size meets condition.
@mixin show-on-mobile($display: block) {
  display: none;
  @include mobile-only {
    display: $display;
  }
}


/// Hides element (`display: none;`) by default, only showing it on tablet screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @content Rules to apply when screen size meets condition.
@mixin show-on-tablet($display: block, $only: false) {
  display: none;

  @include tablet($only) {
    display: $display;
  }
}


/// Hides element (`display: none;`) by default, only showing it on laptop screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @content Rules to apply when screen size meets condition.
@mixin show-on-laptop($display: block, $only: false) {
  display: none;

  @include laptop($only) {
    display: $display;
  }
}


/// Hides element (`display: none;`) by default, only showing it on desktop screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @content Rules to apply when screen size meets condition.
@mixin show-on-desktop($display: block) {
  display: none;

  @include desktop($only) {
    display: $display;
  }
}


/// Shows element by default, only hiding it (`display: none;`) on mobile screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @content Rules to apply when screen size meets condition.
@mixin hide-on-mobile($display: block) {
  display: $display;
  @include mobile-only {
    display: none;
  }
}


/// Shows element by default, only hiding it (`display: none;`) on tablet screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @content Rules to apply when screen size meets condition.
@mixin hide-on-tablet($display: block, $only: false) {
  display: $display;

  @include tablet($only) {
    display: none;
  }
}


/// Shows element by default, only hiding it (`display: none;`) on laptop screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @content Rules to apply when screen size meets condition.
@mixin hide-on-laptop($display: block, $only: false) {
  display: $display;

  @include laptop($only) {
    display: none;
  }
}


/// Shows element by default, only hiding it (`display: none;`) on desktop screen sizes.
///
/// @param {string} $display [block] - Display mode used when visible.
/// @param {boolean} $only [false] - If true, adds max-width expression to media query preventing inheritance by larger
/// breakpoints.
/// @content Rules to apply when screen size meets condition.
@mixin hide-on-desktop($display: block) {
  display: $display;

  @include desktop($only) {
    display: none;
  }
}