@use "sass:map";


$breakpoints: (
    "phone_300": 300px,
    "phone_400": 400px,
    "phone_500": 500px,
    "tablet_600": 600px,
    "tablet_640": 640px,
    "tablet_700": 700px,
    "tablet_800": 800px,
    "tablet_900": 900px,
    "desktop_1000": 1000px,
    "desktop_1100": 1100px,
    "desktop_1200": 1200px,
    "desktop_1300": 1300px,
    "desktop_1500": 1500px,
    "desktop_1800": 1800px
);


// jusqu'à cette taille
@mixin media_max($key) {
    @media (max-width: map.get($breakpoints,$key)) {
        @content;
    }
}

// à partir de cette taille
@mixin media_min($key) {
    @media (min-width: map.get($breakpoints,$key)) {
        @content;
    }
}
// Entre minumum et maximum
// media_minmax("phone","desktop") = tablette
@mixin media_minmax($key_min, $key_max) {
    @media (min-width: calc(map.get($breakpoints,$key_min))) and (max-width: calc(map.get($breakpoints,$key_max) - 1px)) {
        @content;
    }
}