// RIVER Design-System - Defaults: Utilities //

// Define all of our default utilities to output here (singular and design).
// These utilities are combined with defaults from $design-settings for 'utilities'.
// Utilities are normalised via 'utilities/normalise', and then output via 'utilities/output'.
// Utility classes have the format: {utility|property}--{value} (see 'system/mixins-utilities' for more information).

// Default Utilities
@if(design-setting('defaults')
    // Output utilities defaults if utilities are enabled, or 'utilities' has been whitelisted
    and (
        design-setting('defaults.utilities', false) == true
        or list-contains(design-setting('defaults.utilities'), 'utilities')
    )
) {
    $design-utilities-defaults: (

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


        // Design - Borders @common
        'border-helpers': (
            // Load prior to colors, so color utilities override the border helpers
            enabled: false,
            responsive: false,
            properties: (
                'border':                       'border',
            ),
            values: (
                // 'normal@':                      solid ('@' 'common.border-width.normal' 2px) ('@' 'colors.gray.normal' slategray),
                'normal@':                      ('@' 'common.border.normal' (solid 2px slategray)),
                'input@':                       ('@' 'common.border.input' (solid 2px slategray)),
            ),
        ),

        // Design - Color @colors
        'design-color-all': (
            enabled: false,
            states: 'hover',
            properties: (
                'color':                        'color',
                'bg':                           'background-color',
                'border':                       'border-color',
            ),
            values: '@colors',
            // values: '@colors' 'base' 'reverse' 'light' 'normal' 'dark', // limited references
            defaultValue: 'normal',
        ),
        'design-color-primary': (
            enabled: false,
            states: 'hover',
            propertySuffix: 'primary',
            properties: (
                'color':                        'color',
                'bg':                           'background-color',
                'border':                       'border-color',
            ),
            values: '@colors.primary',
            // values: '@colors.primary' 'light' 'normal' 'dark', // limited references
            defaultValue: 'normal',
        ),
        'design-color-gray': (
            enabled: false,
            states: false,
            propertySuffix: 'gray',
            properties: (
                'color':                        'color',
                'bg':                           'background-color',
                'border':                       'border-color',
            ),
            values: '@colors.gray',
            // values: '@colors.gray' 'light' 'normal' 'dark', // limited references
            defaultValue: 'normal',
        ),

        // Design - Notification Color @notifications
        'design-notifications-text': (
            enabled: false,
            properties: (
                'color':                        'color',
            ),
            values: '@notifications' 'text',
        ),
        'design-notifications-bg': (
            enabled: false,
            properties: (
                'bg':                           'background-color',
            ),
            values: '@notifications' 'bg',
        ),
        'design-notifications-border': (
            enabled: false,
            properties: (
                'border':                       'border-color',
            ),
            values: '@notifications' 'border',
        ),

        // Design - Type @type
        'design-type-font': (
            enabled: false,
            properties: (
                'font-family':                  'font-family',
            ),
            values: '@type.font',
            // values: '@type.font' 'primary' 'secondary', // limited references
        ),
        'design-type-size': (
            enabled: false,
            properties: (
                'font-size':                    'font-size',
            ),
            values: '@type.size', // 'small' 'normal' 'large'
            // values: '@type.size' 'small' 'normal' 'large', // limited references
        ),
        'design-type-weight': (
            enabled: false,
            properties: (
                'font-weight':                  'font-weight',
            ),
            values: '@type.weight',
            // values: '@type.weight' 'light' 'normal' 'bold' 'title', // limited references
        ),

        'design-type-spacing': (
            enabled: false,
            properties: (
                'spacing':                      'margin-bottom',
            ),
            values: '@type.spacing',
            // values: '@type.spacing' 'normal' 'small', // limited references
        ),

        'design-type-line-height': (
            enabled: false,
            properties: (
                'line-height':                  'line-height',
            ),
            values: '@type.line-height', // 'none' 'small' 'normal' 'large'
        ),
        'design-type-letter-spacing': (
            enabled: false,
            properties: (
                'letter-spacing':               'letter-spacing',
            ),
            values: '@type.letter-spacing',
            // values: '@type.letter-spacing' 'normal', // limited references
        ),
        
        // Design - Dimension @sizes
        'design-dimension-width': (
            // Note, this is separate from the width helper, which outputs '.width--' classes
            enabled: false,
            responsive: 'md',
            properties: (
                'w':                            'width',
            ),
            values: '@sizes.size'
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'design-dimension-height': (
            enabled: false,
            responsive: 'md',
            properties: (
                'h':                            'height',
            ),
            values: '@sizes.size'
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'dimension-helpers': (
            enabled: false,
            responsive: 'md',
            properties: (
                'w':                            'width',
                'h':                            'height',
            ),
            values: (
                'auto':                         'auto',
                'none':                         0,
                'full':                         100%,
            ),
        ),

        // Design - Margin @sizes
        'design-margin': (
            enabled: false,
            responsive: 'md',
            properties: (
                'm':                            'margin',
                'mt':                           'margin-top',
                'mr':                           'margin-right',
                'mb':                           'margin-bottom',
                'ml':                           'margin-left',
                'mx':                           'margin-left' 'margin-right',
                'my':                           'margin-top' 'margin-bottom',
            ),
            values: '@sizes.size',
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'design-margin-negative': (
            enabled: false,
            responsive: 'md',
            calculation: -1,
            valueSuffix: '-negative',
            properties: (
                'm':                            'margin',
                'mt':                           'margin-top',
                'mr':                           'margin-right',
                'mb':                           'margin-bottom',
                'ml':                           'margin-left',
                'mx':                           'margin-left' 'margin-right',
                'my':                           'margin-top' 'margin-bottom',
            ),
            values: '@sizes.size',
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'margin-helpers': (
            enabled: false,
            responsive: 'md',
            properties: (
                'm':                            'margin',
                'mt':                           'margin-top',
                'mr':                           'margin-right',
                'mb':                           'margin-bottom',
                'ml':                           'margin-left',
                'mx':                           'margin-left' 'margin-right',
                'my':                           'margin-top' 'margin-bottom',
            ),
            values: (
                'auto':                         'auto',
                'none':                         0,
            ),
        ),

        // Design - Padding @sizes
        'design-padding': (
            enabled: false,
            responsive: 'md',
            properties: (
                'p':                            'padding',
                'pt':                           'padding-top',
                'pr':                           'padding-right',
                'pb':                           'padding-bottom',
                'pl':                           'padding-left',
                'px':                           'padding-left' 'padding-right',
                'py':                           'padding-top' 'padding-bottom',
            ),
            values: '@sizes.size',
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'padding-helpers': (
            enabled: false,
            responsive: 'md',
            properties: (
                'p':                            'padding',
                'pt':                           'padding-top',
                'pr':                           'padding-right',
                'pb':                           'padding-bottom',
                'pl':                           'padding-left',
                'px':                           'padding-left' 'padding-right',
                'py':                           'padding-top' 'padding-bottom',
            ),
            values: (
                'none':                         0,
            ),
        ),
        'design-padding-box': (
            enabled: false,
            responsive: 'md',
            properties: (
                'box':                          'padding',
            ),
            values: '@sizes.padding',
            // values: '@sizes.padding' 'small' 'normal' 'large', // limited references
        ),

        // Design - Gap @sizes
        'design-gap': (
            enabled: false,
            responsive: 'md',
            properties: (
                'gap':                          'gap',
                'gap-x':                        'column-gap',
                'gap-y':                        'row-gap',
            ),
            values: '@sizes.size',
            // values: '@sizes.size' 'small' 'normal' 'large', // limited references
        ),
        'gap-helpers': (
            enabled: false,
            responsive: 'md',
            properties: (
                'gap':                          'gap',
                'gap-x':                        'column-gap',
                'gap-y':                        'row-gap',
            ),
            values: (
                'none':                         0,
            ),
        ),

    ) !default;


    // Custom Singular Utilities
    // This is shallow merged into defaults; override the utilities desired
    $design-utilities: () !default;

    // Shallow merge in custom settings
    $design-utilities: map-merge(
        $design-utilities-defaults,
        $design-utilities
    );
}