// RIVER Design-System - Defaults: Sizes //

// Define our size map used in the design system here.
// First we define a standard size range, followed by useful size helpers.

// Design Map for Type
@if(design-setting('defaults')
    // Output sizes defaults if maps are enabled, or 'sizes' has been whitelisted
    and (
        design-setting('defaults.maps', false) == true
        or list-contains(design-setting('defaults.maps'), 'sizes')
    )
) {
    $design-map-sizes: (
        // Whether to output this map as CSS Variables; options include: false (default), true
        '_variables':       true,

        // Standard Sizes
        'size': map-merge(
            // Range
            design-size-scale-range(
                // Range
                design-setting('sizes.scale.base'), // 1rem
                design-setting('sizes.scale.increments'), // 0.5,
                design-setting('sizes.scale.count'), // 40
            ),
            (
                // References
                'subtle':       0.2rem, // 0.2rem, 2px
                'smallest':     0.5rem, // 0.5rem, 5px
                'x-small':      2, // design-size-scale-value(2), 1rem, 10px
                'small':        4, // design-size-scale-value(4), 2rem, 20px
                'normal':       6, // design-size-scale-value(6), 3rem, 30px
                'large':        8, // design-size-scale-value(8), 4rem, 40px
                'x-large':      12, // design-size-scale-value(12), 6rem, 60px
                // References - Layout
                'layout-small':     16, // design-size-scale-value(16), 8rem, 80px
                'layout-normal':    24, // design-size-scale-value(24), 12rem, 120px
                'layout-x-large':   32, // design-size-scale-value(32), 16rem, 160px
            ),
        ), // Merging in the size-scale is optional if you define all sizes explicitly

        // Padding
        'padding': (
            // References
            'small':        0.5rem 1.0rem, // 5px 10px
            'normal':       1.0rem 2.0rem, // 10px 20px
            'large':        1.5rem 4.0rem, // 15px 40px
        ),

        // Grid Gutter
        'gutter': (
            'small':        ('@', 'sizes.size.small', 2rem), // 20px
            'normal':       ('@', 'sizes.size.normal', 3rem), // 30px
            'large':        ('@', 'sizes.size.large', 4rem), // 40px
        ),

        // Multipliers
        'multiplier': (
            'small':        0.8,
            'small-subtle': 0.95,
            'normal':       1,
            'large-subtle': 1.05,
            'large':        1.2,
        ),

        // Ratios
        'ratio': (
            'vertical-small':   33%,
            'vertical-normal':  66%,
            'horizontal-small': 20%,
            'horizontal-normal': 40%,
            'square': 100%,
        ),

    ) !default;

    // Apply the map
    $design-map: design-map-set('sizes', $design-map-sizes);
}

// To update the map, you can use any of:
// design-map-set('sizes', (...)); design-map-update('sizes', (...)); design-map-deep-update('sizes', (...))