// Ripple Utilities - Design for Padding //

// Define all of our design utilities for padding here.
// Example classes: .p--normal, .pt--small, .px--none, .md:p--normal, .box--normal, etc

// Design Utilities for Padding
$design-utilities-padding: (

    // Design - padding
    'design-padding': (
        enabled: true,
        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', // all references
        // values: '@sizes.size' 'small' 'normal' 'large', // limited references
    ),

    'padding-helpers': (
        enabled: true,
        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: true,
        responsive: 'md',
        properties: (
            'box':                          'padding',
        ),
        values: '@sizes.padding',
        // values: '@sizes.padding' 'small' 'normal' 'large', // limited references
    ),

);

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