@use 'sass:map';
@use '../settings' as *;

@mixin breakpoint($range) {
    $small-upper-boundary: map.get($breakpoints, medium);
    $medium-upper-boundary: map.get($breakpoints, large);
    $large-upper-boundary: map.get($breakpoints, xlarge);
    $xlarge-upper-boundary: map.get($breakpoints, xxlarge);

    @if $range == 'small-only' {
        @media (max-width: #{$small-upper-boundary - 1}) {
            @content;
        }
    } @else if $range == 'medium-up' {
        @media (min-width: #{$small-upper-boundary}) {
            @content;
        }
    } @else if $range == 'medium-only' {
        @media (min-width: #{$small-upper-boundary}) and (max-width: #{$medium-upper-boundary - 1}) {
            @content;
        }
    } @else if $range == 'large-up' {
        @media (min-width: #{$medium-upper-boundary}) {
            @content;
        }
    } @else if $range == 'large-only' {
        @media (min-width: #{$medium-upper-boundary}) and (max-width: #{$large-upper-boundary - 1}) {
            @content;
        }
    } @else if $range == 'xlarge-up' {
        @media (min-width: #{$large-upper-boundary}) {
            @content;
        }
    } @else if $range == 'xlarge-only' {
        @media (min-width: #{$large-upper-boundary}) and (max-width: #{$xlarge-upper-boundary - 1}) {
            @content;
        }
    } @else if $range == 'xxlarge-up' {
        @media (min-width: #{$xlarge-upper-boundary}) {
            @content;
        }
    }
}