// RIVER Design-System - Defaults: Common //

// Define common values used in our design system here.

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

        // Borders
        'border-width': (
            'normal':       2px,
            'input':        2px,
        ),
        'border-radius': (
            'normal':       0,
            'input':        4px,
        ),
        'border': (
            'normal':       solid ('@', 'common.border-width.normal', 2px) ('@', 'colors.gray.border', slategray),
            'input':        solid ('@', 'common.border-width.input', 4px) ('@', 'colors.gray.border', slategray),
        ),

        // Shadows
        'shadow': (
            'soft':             0px 1px 2px rgba(design-value('colors.gray.normal', slategray), 0.2),
            'normal':           1px 2px 3px rgba(design-value('colors.gray.normal', slategray), 0.3),
            'strong':           1px 2px 3px rgba(design-value('colors.gray.normal', slategray), 0.4),
            'alt':              1px 2px 3px rgba(white, 0.3),
        ),
        'focus': (
            'soft':             0px 0px 3px rgba(design-value('colors.primary.normal', slateblue), 0.6),
            'normal':           0px 0px 4px rgba(design-value('colors.primary.normal', slateblue), 0.8),
            'strong':           0px 0px 4px rgba(design-value('colors.primary.normal', slateblue), 1.0),
            'alt':              0px 0px 4px rgba(white, 0.8),
        ),

        // Opacity
        'opacity': (
            'soft':             0.25, // 25% visible
            'normal':           0.5, // 50% visible
            'strong':           0.75, // 75% visible
            'disabled':         0.5, // 50% visible
        ),

        // Animations
        'speed': (
            'fast':             0.2s, // 0.2 seconds
            'normal':           0.5s, // 0.5 seconds
            'slow':             1.0s, // 1 second
        ),
        'easing': (
            'ease-in':          cubic-bezier(0.4, 0, 1, 1), // Slow Start
            'ease-out':         cubic-bezier(0, 0, 0.2, 1), // Slow End
            'ease-in-out':      cubic-bezier(0.4, 0, 0.2, 1), // Slow Stard/End
        ),
        'transition': (
            'fast':             all ('@', 'common.speed.fast', 0.2s) ('@', 'common.easing.ease-in-out', ease-in-out),
            'normal':           all ('@', 'common.speed.normal', 0.5s) ('@', 'common.easing.ease-in-out', ease-in-out),
            'slow':             all ('@', 'common.speed.slow', 1.0s) ('@', 'common.easing.ease-in-out', ease-in-out),
        ),

    ) !default;

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

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