// RIVER Design-System: System - Mixins / Responsive //

// Responsive mixins for working with breakpoints.
// These output CSS over multiple breakpoint values.
// These mixins follow functionality defined in 'system/functions-responsive'.

// Media query for the given breakpoint size upwards (min-width, mobile first)
@mixin design-breakpoint-up($breakpoint) {
    $breakpoints: design-breakpoints();
    $width: if(type-of($breakpoint) == 'string', map-get($breakpoints, $breakpoint), $breakpoint);
    @if(type-of($breakpoint) == 'string' and not(map-has-key($breakpoints, $breakpoint))) {
        @error('design-breakpoint-up() unable to match the design breakpoint "#{$breakpoint}"');
    }
    @if($width and $width > 0) {
        @media(min-width: $width) {
            @content;
        }
    } @else {
        @content;
    }
}

// Media query for the given breakpoint size downards (max-width, desktop first)
@mixin design-breakpoint-down($breakpoint) {
    $breakpoints: design-breakpoints();
    $width: if(type-of($breakpoint) == 'string', map-get($breakpoints, $breakpoint), $breakpoint);
    @if(type-of($breakpoint) == 'string' and not(map-has-key($breakpoints, $breakpoint))) {
        @error('design-breakpoint-down() unable to match the design breakpoint "#{$breakpoint}"');
    }
    @if($width and $width > 0) {
        @media(max-width: $width) {
            @content;
        }
    } @else {
        @content;
    }
}

// Media query at the given breakpoint only (min-width and max-width)
@mixin design-breakpoint-at($breakpoint) {
    // Breakpoints
    $breakpoints: design-breakpoints();
    @if(not(map-has-key($breakpoints, $breakpoint))) {
        @error('design-breakpoint-at() unable to match the design breakpoint "#{$breakpoint}"');
    }
    // Define
    $breakpointNext: design-breakpoint-next($breakpoint);
    $widthMin: map-get($breakpoints, $breakpoint);
    $widthMax: if($breakpointNext, map-get($breakpoints, $breakpointNext), null);
    // Output
    @if($widthMin and $widthMax) {
        @media (min-width: $widthMin) and (max-width: $widthMax) {
            @content;
        }
    }
    @if($widthMin and not($widthMax)) {
        @media (min-width: $widthMin) {
            @content;
        }
    }
    @if(not($widthMin) and $widthMax) {
        @media (max-width: $widthMax) {
            @content;
        }
    }
}

// Media queries for all responsive breakpoints, passing back the $variation label (eg, 'md:')
// Note that the smallest breakpoint (0 width) has an empty $variation label (eg, '')
@mixin design-breakpoints-query-up() {
    $breakpoints: design-breakpoints();
    $seperator: ':';//design-setting('general', 'variations.seperator'); // eg, ':'    
    @each $breakpoint, $width in $breakpoints {
        // Define the variation label; note it's an empty string for the first breakpoint (0 upwards)
        $variation: if($width > 0, $breakpoint + $seperator, ''); // eg, '', 'md:', etc
        @include design-breakpoint-up($breakpoint) {
            @content($variation, $breakpoint);
        }
    }
}