// ============================================================================
// 02-TOOLS -> MIXINS -> #MEDIA-BREAKPOINT
// ============================================================================


//
// SCSS imports
//

@use '../../01-settings' as *;


/// Get breakpoint width
///
/// Returns a value corresponding to the breakpoint requested.
///
/// @param {String} $breakpoint - Name of breakpoint in the $breakpoints map
/// (set in `01-settings/_breakpoints.scss`)
/// @param {Map} $breakpoints ($breakpoints) - breakpoints map
/// 
/// @returns {Number} Value in pixels eg. 768px
/// 
/// @access private

@function _get-breakpoint-width($name, $breakpoints: $breakpoints) {
    @if map-has-key($breakpoints, $name) {
        @return map-get($breakpoints, $name);
    } @else {
        @warn "Breakpoint #{$name} wasn't found in $breakpoints.";
    }
}


/// Media breakpoint up
///
/// Outputs the contents of the mixin in an @media rule with a min-width taken
/// from the breakpoints map.
///
/// @param {String} $breakpoint - Size on the breakpoint map (set in
/// `01-settings/_breakpoints.scss`).
/// 
/// @content styling rules, wrapped into a @media query
/// 
/// @example scss
///   .class-name {
///     @include media-breakpoint-up('md') {
///       ...
///     }
///   }
/// 
/// @access public

@mixin media-breakpoint-up($breakpoint) {
    @media screen and (min-width: _get-breakpoint-width($breakpoint)) {
        @content;
    }
} 


/// Media breakpoint down
///
/// Outputs the contents of the mixin in an @media rule with a max-width taken
/// from the breakpoints map.
///
/// @param {String} $breakpoint - Size on the breakpoint map (set in
/// `01-settings/_breakpoints.scss`).
/// 
/// @content styling rules, wrapped into a @media query
/// 
/// @example scss
///   .class-name {
///     @include media-breakpoint-down('md') {
///       ...
///     }
///   }
/// 
/// @access public

@mixin media-breakpoint-down($breakpoint) {
    @media screen and (max-width: (_get-breakpoint-width($breakpoint) - .02px )) {
        @content;
    }
} 