/* Spacing */
$spacing-system: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32;
$space-size: 0.5rem;

/* Fonts */
// TODO Need to standardize these around a base font size for $font-size-m
$font-size-xs: 0.75rem;
$font-size-s: 0.875rem;
$font-size-m: 1rem;
$font-size-l: 1.25rem;
$font-size-xl: 1.5rem;
$font-sizes: (
    'xs': $font-size-xs,
    'sm': $font-size-s,
    'md': $font-size-m,
    'lg': $font-size-l,
    'xl': $font-size-xl
);


/* Grid Count (Columns + Grid) */
$grid-columns: 12;

/* Grid Percents */
$grid-width: 1 / $grid-columns;

/* Tab Sizes */
$tab-sizes: (
    'xsmall': 0.6rem,
    'small': 0.75rem,
    'large': 1.25rem,
    'xlarge': 1.5rem,
);

/* Media Queries */
/* Smaller than the defined pixels are the dimensions for that range */
$breakpoints: (
    'xs': 640px,
    'sm': 768px,
    'md': 1024px,
    'lg': 1280px,
);

$breakpoint-pairs: (
    'sm': 'xs',
    'md': 'sm',
    'lg': 'md',
    'xl': 'lg',
);

@mixin screen-above($breakpoint) {
    @if not map-has-key($map: $breakpoints, $key: $breakpoint) {
        @error 'The given breakpoint #{$breakpoint} for @screen-above does not exist.';
    }

    @media screen and (min-width: map-get($breakpoints, $breakpoint)) {
        @content;
    }
}

@mixin screen-between($lower, $higher) {
    @if not map-has-key($map: $breakpoints, $key: $lower) {
        @error 'The given breakpoint #{$lower} ($lower) for @screen-between does not exist.';
    }

    @if not map-has-key($map: $breakpoints, $key: $higher) {
        @error 'The given breakpoint #{$higher} ($higher) for @screen-between does not exist.';
    }

    @media screen and (min-width: map-get($breakpoints, $lower)) and (max-width: map-get($breakpoints, $higher) - 1) {
        @content;
    }
}

@mixin screen-below($breakpoint) {
    @if not map-has-key($map: $breakpoints, $key: $breakpoint) {
        @error 'The given breakpoint #{$breakpoint} for @screen-below does not exist.';
    }

    @media screen and (max-width: map-get($breakpoints, $breakpoint) - 1) {
        @content;
    }
}

// TODO: Once we move to dart-sass, look into using content with variables
@mixin generate-classes-for-viewport($classes, $property, $prefix: '-', $generate-viewports: 'true') {
    // We build in this order since we want larger viewports to have higher precedence
    // so we can write classes like u-none u-block-md u-none-lg

    @each $class in $classes {
        .u#{$prefix}#{$class} {
            #{$property}: $class !important;
        }
    }

    @debug $generate-viewports;
    @if $generate-viewports == 'true' {
        @each $suffix, $limit in $breakpoint-pairs {
            @each $class in $classes {
                @include screen-above($limit) {
                    .u#{$prefix}#{$class}-#{$suffix} {
                        #{$property}: $class !important;
                    }
                }
            }
        }
    }
}