// Media Device Breakpoints
$large-desktop-container:       75.000rem !default;
$desktop-container:             60.000rem !default;
$tablet-container:              48.000rem !default;
$large-mobile-container:        30.000rem !default;
$mobile-container:              100% !default;

// Breakpoint Variables For Particles
$media: "all" !default;
$mobile-only: "#{$media} and (max-width:#{$tablet-container - 0.062})" !default;
$no-mobile: "#{$media} and (min-width:#{$tablet-container})" !default;
$small-mobile-range: "#{$media} and (max-width:#{$large-mobile-container})" !default;
$large-mobile-range: "#{$media} and (min-width:#{$large-mobile-container + 0.063}) and (max-width:#{$tablet-container - 0.062})" !default;
$tablet-range: "#{$media} and (min-width:#{$tablet-container}) and (max-width:#{$desktop-container - 0.062})" !default;
$desktop-range: "#{$media} and (min-width:#{$desktop-container}) and (max-width:#{$large-desktop-container - 0.062})" !default;
$large-desktop-range: "#{$media} and (min-width:#{$large-desktop-container})" !default;

// Breakpoints
@mixin breakpoint($breakpoint, $media: all) {
    @if $breakpoint == large-desktop-range {
        @media only #{$media} and (min-width: $large-desktop-container) { @content; }
    }
    @else if $breakpoint == desktop-range {
        @media only #{$media} and (min-width: $desktop-container) and (max-width: $large-desktop-container - 0.062) { @content; }
    }
    @else if $breakpoint == tablet-range {
        @media only #{$media} and (min-width: $tablet-container) and (max-width: $desktop-container - 0.062) { @content; }
    }
    @else if $breakpoint == large-mobile-range {
        @media only #{$media} and (min-width: $large-mobile-container + 0.063) and (max-width: $tablet-container - 0.062) { @content; }
    }
    @else if $breakpoint == small-mobile-range {
        @media only #{$media} and (max-width: $large-mobile-container) { @content; }
    }
    @else if $breakpoint == no-mobile {
        @media only #{$media} and (min-width: $tablet-container) { @content; }
    }
    @else if $breakpoint == mobile-only {
        @media only #{$media} and (max-width: $tablet-container - 0.062) { @content; }
    }
    @else if $breakpoint == desktop-only {
        @media only #{$media} and (max-width: $desktop-container - 0.062) { @content; }
    }
}