// Ripple Utilities - Standard //

// Define all of our standard utilities to output here.
// Example classes: .block, .flex, .text-align--center, .direction--row, etc

// Standard Utilities
$design-utilities-standard: (

    // Display
    'display-important': (
        enabled: true,
        responsive: true, // 'sm' 'md' 'lg',
        responsiveAt: false,
        responsiveDown: false,
        states: false,
        media: 'print',
        important: false,
        importantVariation: true,
        properties: 'display', // use the property value as the class
        // properties: ('display': 'display') // use 'display' as a class prefix
        values: (
            'none':                         'none',
            'block':                        'block',
            'inline-block':                 'inline-block',
            'inline':                       'inline',
        ),
    ),
    'display-common': (
        enabled: true,
        responsive: false, // 'sm' 'md' 'lg',
        properties: 'display', // use the property value as the class
        // properties: ('display': 'display') // use 'display' as a class prefix
        values: (
            'flex':                         'flex',
            'inline-flex':                  'inline-flex',
            'grid':                         'grid',
            'inline-grid':                  'inline-grid',
            'flow-root':                    'flow-root',
        ),
    ),

    // Position
    'position': (
        enabled: true,
        responsive: false,
        properties: 'position', // use the property value as the class
        values: (
            'static':                       'static',
            'relative':                     'relative',
            'absolute':                     'absolute',
            'fixed':                        'fixed',
            'sticky':                       'sticky',
        ),
    ),

    // Text
    'text': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
        properties: (
            'text-align':                   'text-align'
        ),
        values: (
            'center':                       'center',
            'left':                         'left',
            'right':                        'right',
            'justify':                      'text',
        ),
    ),

    // Flex
    'flex-direction': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
        properties: (
            'direction':                    'flex-direction'
        ),
        values: (
            'row':                          'row',
            'row-reverse':                  'row-reverse',
            'col':                          'column',
            'col-reverse':                  'column-reverse',
        ),
    ),
    'flex-wrap': (
        enabled: true,
        responsive: false,
        properties: (
            'flex-wrap':                    'flex-wrap'
        ),
        values: (
            'none':                         'nowrap',
            'wrap':                         'wrap',
            'reverse':                      'wrap-reverse',
        ),
    ),
    'justify-content': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
        properties: (
            'justify':                      'justify-content',
        ),
        values: (
            'start':                        'flex-start',
            'end':                          'flex-end',
            'center':                       'center',
            'between':                      'space-between',
            'around':                       'space-around',
            'evenly':                       'space-evenly',
        ),
    ),
    'align-items': (
        enabled: true,
        responsive: 'sm' 'md' 'lg',
        properties: (
            'align':                        'align-items',
        ),
        values: (
            'stretch':                      'stretch',
            'start':                        'flex-start',
            'center':                       'center',
            'end':                          'flex-end',
            'baseline':                     'baseline',
        ),
    ),
    'align-content': (
        enabled: true,
        responsive: false,
        properties: (
            'content':                      'align-content',
        ),
        values: (
            'stretch':                      'stretch',
            'start':                        'flex-start',
            'center':                       'center',
            'end':                          'flex-end',
            'between':                      'space-between',
            'around':                       'space-around',
            'evenly':                       'space-evenly',
        ),
    ),

);

// Merge in utilities
$design-utilities: design-utilities-add($design-utilities-standard);