// Media mixins:
//
// $breakpoints: (
//     laptop: 1199px,     // 992px -> 1199px
//     tablet: 991px,      // 768px ->  991px
//     smart: 767px,       // 578px ->  767px
//     mobile: 577px,      // 0px   ->  577px
// );
$media-breakpoints: $breakpoints !default;

// Media min automatically create a "only screen and (min-width: $value)" media query.
@mixin mediaMin($value) {
    @media only screen and (min-width: $value) {
        @content;
    }
}

// Media max automatically create a "only screen and (max-width: $value)" media query.
@mixin mediaMax($value) {
    @media only screen and (max-width: $value) {
        @content;
    }
}

// Media only automatically create a "only screen and(min-width: $minvalue) and (max-width: $maxvalue)" media query.
@mixin mediaOnly($minvalue, $maxvalue) {
    @media only screen and (min-width: $minvalue) and (max-width: $maxvalue) {
        @content;
    }
}

// Media mixin for easier readable media queries.
//
// Usage:
//
// .example {
//     @include media('<tablet') {
//         color: red;
//     }
//
//     @include media('laptop') {
//         color: blue;
//     }
// }
//
// Output:
//
// @media only screen and (max-width: 767px) {
//     .example {
//         color: red;
//     }
// }
//
// @media only screen and (min-width: 992px) and (max-width: 1199px) {
//     .example {
//         color: blue;
//     }
// }
@mixin media($condition) {
    $function: str-slice($condition, 1, 1);
    $currentBreakpoint: str-slice($condition, 2);

    @if $function == '>' {
        $value: map-get($media-breakpoints, $currentBreakpoint);

        @if not $value {
            @error 'Following condition is not allowed: #{$condition}';
        }

        @include mediaMin($value + 1) {
            @content;
        }
    } @else if $function == '<' {
        $indexCondition: 1;

        @if $currentBreakpoint != 'default' {
            $indexCondition: index(map-keys($media-breakpoints), $currentBreakpoint) + 1;
        }

        @if $indexCondition > length($media-breakpoints) or $indexCondition < 1 {
            @error 'Following condition is not allowed: #{$condition}';
        }

        $value: nth(nth($media-breakpoints, $indexCondition), 2);

        @include mediaMax($value) {
            @content;
        }
    } @else {
        @if $condition == 'default' {
            $maxBreakpoint: 0;

            @each $name, $breakpoint in $media-breakpoints {
                @if $breakpoint > $maxBreakpoint {
                    $maxBreakpoint: $breakpoint;
                }
            }

            @if $maxBreakpoint > 0 {
                $maxBreakpoint: $maxBreakpoint + 1;
            }

            @include mediaMin($maxBreakpoint) {
                @content;
            }
        } @else {
            $maxvalue: map-get($media-breakpoints, $condition);
            $minvalue: 0;

            @if not $maxvalue {
                @error 'Following condition is not allowed: #{$condition}';
            }

            @each $name, $breakpoint in $media-breakpoints {
                @if $breakpoint > $minvalue and $breakpoint < $maxvalue {
                    $minvalue: $breakpoint + 1;
                }
            }

            @include mediaOnly($minvalue, $maxvalue) {
                @content;
            }
        }
    }
}

// Media each max for easy generate attributes foreach media query.
//
// Usage:
//
// $margins: (
//     default: auto,
//     laptop: 62px,
//     tablet: 64px,
//     smart: 30px
// );
//
// .example {
//     @include mediaEachMax((
//         margin-left: $margins,
//         margin-right: $margins,
//     ));
// }
//
// Output:
//
// .example {
//     margin-left: auto;
//     margin-right: auto;
// }
//
// @media only screen and (max-width: 1199px) {
//     .example {
//         margin-left: 62px;
//         margin-left: 62px;
//     }
// }
//
// @media only screen and (max-width: 991px) {
//     .example {
//         margin-left: 64px;
//         margin-left: 64px;
//     }
// }
//
// @media only screen and (max-width: 767px) {
//     .example {
//         margin-left: 30px;
//         margin-left: 30px;
//     }
// }
@mixin mediaEachMax($attributes) {
    @each $attribute-name, $matrix in $attributes {
        @if map-has-key($matrix, 'default') {
            #{$attribute-name}: map-get($matrix, 'default');
        }
    }

    @each $breakpoint-name, $breakpoint in $media-breakpoints {
        @include mediaMax($breakpoint) {
            @each $attribute-name, $matrix in $attributes {
                @if map-has-key($matrix, $breakpoint-name) {
                    #{$attribute-name}: map-get($matrix, $breakpoint-name);
                    @content;
                }
            }
        }
    }
}