@use 'sass:map';
@use '@tokens' as tokens;
@use '../../tools/breakpoint';

@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
    $suffix: breakpoint.get-modifier('suffix', $breakpoint-name, $breakpoint-value);

    @include breakpoint.up($breakpoint-value) {
        .breakout-container#{$suffix} {
            margin-inline: calc(-1 * var(--container-padding-inline));
        }
    }
}

$previous-breakpoint: (
    name: '',
    value: 0,
);

@each $breakpoint-name, $breakpoint-value in tokens.$breakpoints {
    @if map.get($previous-breakpoint, name) != '' {
        @include breakpoint.up(map.get($previous-breakpoint, value)) {
            @include breakpoint.down($breakpoint-value) {
                .breakout-container-#{map.get($previous-breakpoint, name)}-only {
                    margin-inline: calc(-1 * var(--container-padding-inline));
                }
            }
        }
    }

    $previous-breakpoint: (
        name: $breakpoint-name,
        value: $breakpoint-value,
    );
}
