// Ripple Design Map - Sizes //

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

// Size Scale setup
// $design-settings: design-settings-apply((
//     'sizes': (
//         'scale.count':              50, // Number of values in our range
//         'scale.base':               1rem, // Sizes in rems
//         'scale.increments':         0.5, // Size n = 1rem * (0.5n); even increments
//     ),
// ));

// Design Map for Sizes
$design-map-sizes: (
    '_variables':       true, // Output this map as CSS Variables

    // Standard Sizes
    // Merge in our default Size Scale
    // Merging in the size-scale is optional if we define all sizes explicitly
    '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
        ),
    ),

    // 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%,
    ),

);

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