// Gutter
//

$gutter: 28px !default;
$gutter--xs: calc(#{var(--gutter)} * 0.85) !default;
$gutter--sm: calc(#{var(--gutter)} * 0.925) !default;
$gutter--md: var(--gutter) !default;
$gutter--lg: calc(#{var(--gutter)} * 1.075) !default;
$gutter--xl: calc(#{var(--gutter)} * 1.15) !default;
$gutter--xxl: calc(#{var(--gutter)} * 1.25) !default;

$gutters: (
    'xs': $gutter--xs,
    'sm': $gutter--sm,
    'md': $gutter--md,
    'lg': $gutter--lg,
    'xl': $gutter--xl,
    'xxl': $gutter--xxl
) !default;

@function gutter($gutter-key: null) {
    @if not ($gutter-key) {
        @return var(--gutter);
    }

    @return var(--gutter--#{$gutter-key});
}