// Ripple Design Map - Common //

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

// Design Map for Common Values
$design-map-common: (
    '_variables':       false, // DON'T Output this map as CSS Variables

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

);

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