// Media step breakpoint mixin based on Angular Material lib
$breakpoints: (
    xs: 'screen and (max-width: 599px)',
    gt-xs: 'screen and (min-width: 600px)',
    sm: 'screen and (min-width: 600px) and (max-width: 959px)',
    gt-sm: 'screen and (min-width: 960px)',
    md: 'screen and (min-width: 960px) and (max-width: 1279px)',
    gt-md: 'screen and (min-width: 1280px)',
    lg: 'screen and (min-width: 1280px) and (max-width: 1919px)',
    gt-lg: 'screen and (min-width: 1920px)',
    xl: 'screen and (min-width: 1920px) and (max-width: 5000px)'
) !default;

@mixin media-breakpoint($breakpointName) {

    $mediaQuery: map_get($breakpoints, $breakpointName);

    @if ($mediaQuery != null) {

        @media #{$mediaQuery} {
            @content
        }
    }
}
