////
///
/// Breakpoints
/// ===========================================================================
///
/// Responsive breakpoint mixins.
/// Defines mixins only, no output.
///
/// @group Layout
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Breakpoint Map
// ============================================================================

@use "../01-core/external" as *;

$ss-breakpoints: (
    "xs": 0,
    "sm": q(640),
    "md": q(768),
    "lg": q(1024),
    "xl": q(1280),
    "2xl": q(1536),
) !default;

// ============================================================================
// Breakpoint Mixins
// ============================================================================

/// Media query for minimum width (mobile-first)
/// @param {String} $breakpoint - Breakpoint name from $ss-breakpoints
@mixin breakpoint-up($breakpoint) {
    $value: map-get($ss-breakpoints, $breakpoint);
    @if $value == 0 {
        @content;
    } @else {
        @media (min-width: $value) {
            @content;
        }
    }
}

/// Media query for maximum width
/// @param {String} $breakpoint - Breakpoint name from $ss-breakpoints
@mixin breakpoint-down($breakpoint) {
    $value: map-get($ss-breakpoints, $breakpoint);
    @if $value > 0 {
        @media (max-width: ($value - q(0.02))) {
            @content;
        }
    }
}

/// Media query for a specific breakpoint range
/// @param {String} $lower - Lower breakpoint name
/// @param {String} $upper - Upper breakpoint name
@mixin breakpoint-between($lower, $upper) {
    $lower-value: map-get($ss-breakpoints, $lower);
    $upper-value: map-get($ss-breakpoints, $upper);

    @media (min-width: $lower-value) and (max-width: ($upper-value - q(0.02))) {
        @content;
    }
}

/// Media query for exact breakpoint only
/// @param {String} $breakpoint - Breakpoint name from $ss-breakpoints
@mixin breakpoint-only($breakpoint) {
    $keys: map-keys($ss-breakpoints);
    $index: index($keys, $breakpoint);
    $next: null;
    @if $index < length($keys) {
        $next: nth($keys, $index + 1);
    }

    @if $next {
        @include breakpoint-between($breakpoint, $next) {
            @content;
        }
    } @else {
        @include breakpoint-up($breakpoint) {
            @content;
        }
    }
}