$responsive-design: "mobile" !default;
$responsive-size: "both" !default;

$breakpoint-desktop: 1440px !default;
$breakpoint-laptop: 1280px !default;
$breakpoint-tablet-landscape: 1024px !default;
$breakpoint-tablet-portrait: 768px !default;
$breakpoint-mobile-landscape: 480px !default;
$breakpoint-mobile-portrait: 320px !default;

$breakpoint-small: 768px !default;
$breakpoint-medium: 1280px !default;
$breakpoint-large: 1440px !default;

@mixin if-min($min) {
    @media only screen and (min-width: $min) {
        @content;
    }
}

@mixin if-max($max) {
    @media only screen and (max-width: $max) {
        @content;
    }
}

@mixin if-min-max($min, $max) {
    @media only screen and (min-width: $min) and (max-width: $max) {
        @content;
    }
}

@mixin if-landscape {
    @media only screen and (orientation: landscape) {
        @content;
    }
}

@mixin if-portrait {
    @media only screen and (orientation: portrait) {
        @content;
    }
}

// Either support desktop-first or mobile-first responsive pattern
@mixin do-responsive($desktop, $mobile) {
    @if $responsive-design == "desktop" {
        @if $desktop {
            @include if-max($desktop) {
                @content;
            }
        } @else {
            @content;
        }
    } @else {
        @if $mobile {
            @include if-min($mobile) {
                @content;
            }
        } @else {
            @content;
        }
    }
}

//-------------------- Breakpoints --------------------//

// Uses min or max
@mixin if-desktop {
    @include do-responsive(null, $breakpoint-tablet-landscape) {
        @content;
    }
}

@mixin if-tablet-landscape {
    @include do-responsive($breakpoint-tablet-landscape, $breakpoint-tablet-portrait) {
        @content;
    }
}

@mixin if-tablet-portrait {
    @include do-responsive($breakpoint-tablet-portrait, $breakpoint-mobile-landscape) {
        @content;
    }
}

@mixin if-mobile-landscape {
    @include do-responsive($breakpoint-mobile-landscape, $breakpoint-mobile-portrait) {
        @content;
    }
}

@mixin if-mobile-portrait {
    @include do-responsive($breakpoint-mobile-portrait, null) {
        @content;
    }
}

@mixin if-large() {
    @include do-responsive($breakpoint-large, $breakpoint-medium) {
        @content;
    }
}

@mixin if-medium() {
    @include do-responsive($breakpoint-medium, $breakpoint-small) {
        @content;
    }
}

@mixin if-small() {
    @include do-responsive($breakpoint-small, null) {
        @content;
    }
}

// Within 2 ranges
@mixin in-desktop {
    @include if-min($breakpoint-tablet-landscape + 1) {
        @content;
    }
}

@mixin in-tablet {
    @include if-min-max($breakpoint-mobile-landscape + 1, $breakpoint-tablet-landscape) {
        @content;
    }
}

@mixin in-mobile {
    @include if-max($breakpoint-mobile-landscape)  {
        @content;
    }
}

@mixin in-large {
    @include if-min($breakpoint-medium + 1) {
        @content;
    }
}

@mixin in-medium {
    @include if-min-max($breakpoint-small + 1, $breakpoint-medium) {
        @content;
    }
}

@mixin in-small {
    @include if-max($breakpoint-small) {
        @content;
    }
}