_m-breakpoint.scss

@use "sass:meta";
@use "../01-abstract/variables";
@use "f-em";

@use "sass:map";

/**
 * Breakpoints
 *
 * @author Milan Ricoul
 *
 * @param $breakpoint
 * @param $min-or-max-or-breakpoint
 *
 * Examples :
 *
 *      @include breakpoints(sm, md) { ... }
 *          return @media screen and (min-width: 768px) and (max-width: 1024px) { ... }
 *
 *      @include breakpoints(sm, max) { ... }
 *          return @media screen and (max-width: 767px) { ... }
 *
 *      @include breakpoints(sm) or @include breakpoints(sm, min) { ... }
 *          return @media screen and (min-width: 768px) { ... }
 *
 */

@mixin breakpoints($breakpoint, $min-or-max-or-breakpoint: min) {
    $font-size: 16px; // don't use em function whitout param, $font-size-base can be modified

    @if (meta.type-of(map.get(variables.$breakpoints, $min-or-max-or-breakpoint)) == "number") {

        @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) and (max-width: f-em.em(map.get(variables.$breakpoints, $min-or-max-or-breakpoint) - 1, $font-size)) {
            @content;
        }
    } @else if ($min-or-max-or-breakpoint == max) {

        @media screen and (max-width: f-em.em(map.get(variables.$breakpoints, $breakpoint) - 1, $font-size)) {
            @content;
        }
    } @else {

        @media screen and (min-width: f-em.em(map.get(variables.$breakpoints, $breakpoint), $font-size)) {
            @content;
        }
    }
}