// Media query for minimum resolution
@mixin if-min($min) {
    @media only screen and (min-width: $min) {
        @content;
    }
}

// Media query for maximum resolution
@mixin if-max($max) {
    @media only screen and (max-width: $max) {
        @content;
    }
}

// Media query for between minimum and maximum resolution
@mixin if-min-max($min, $max) {
    @media only screen and (min-width: $min) and (max-width: $max) {
        @content;
    }
}

// Media query for landscape orientation detection
@mixin if-landscape {
    @media only screen and (orientation: landscape) {
        @content;
    }
}

// Media query for portrait orientation detection
@mixin if-portrait {
    @media only screen and (orientation: portrait) {
        @content;
    }
}

// Media query for retina / HD displays
@mixin if-retina {
    @media
        only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (-moz-min-device-pixel-ratio: 2),
        only screen and (min-device-pixel-ratio: 2) {
        @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 --------------------//

@mixin if-xlarge() {
    @include do-responsive(nth($breakpoint-range-xlarge, 2), nth($breakpoint-range-xlarge, 1)) {
        @content;
    }
}

@mixin if-large() {
    @include do-responsive(nth($breakpoint-range-large, 2), nth($breakpoint-range-large, 1)) {
        @content;
    }
}

@mixin if-medium() {
    @include do-responsive(nth($breakpoint-range-medium, 2), nth($breakpoint-range-medium, 1)) {
        @content;
    }
}

@mixin if-small() {
    @include do-responsive(nth($breakpoint-range-small, 2), nth($breakpoint-range-small, 1)) {
        @content;
    }
}

@mixin if-xsmall() {
    @include do-responsive(nth($breakpoint-range-xsmall, 2), nth($breakpoint-range-xsmall, 1)) {
        @content;
    }
}

// Within 2 ranges
@mixin in-range($range) {
    @if type-of($range) != "list" {
        @warn "in-range() requires a list with a min and max value";
    }

    $min: nth($range, 1);
    $max: nth($range, 2);

    @if $min and $max {
        @include if-min-max($min, $max) {
            @content;
        }

    } @else if $min {
        @include if-min($min) {
            @content;
        }

    } @else if $max {
        @include if-max($max) {
            @content;
        }
    }
}

@mixin in-xlarge {
    @include in-range($breakpoint-range-xlarge) {
        @content;
    }
}

@mixin in-large {
    @include in-range($breakpoint-range-large) {
        @content;
    }
}

@mixin in-medium {
    @include in-range($breakpoint-range-medium) {
        @content;
    }
}

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

@mixin in-xsmall {
    @include in-range($breakpoint-range-xsmall) {
        @content;
    }
}