// Ripple Utilities - Design for Gaps //

// Define all of our design utilities for gaps here.
// Example classes: .gap-normal, .gap-x--normal, .md:gap--normal, .gapx--none, .md:gapx--none, etc

// Design Utilities for Gaps
$design-utilities-gaps: (

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

    'gap-helpers': (
        enabled: true,
        responsive: 'md',
        properties: (
            'gap':                          'gap',
            'gap-x':                        'column-gap',
            'gap-y':                        'row-gap',
        ),
        values: (
            'none':                         0,
        ),
    ),

);

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