// Ripple Utilities - Design for Dimensions //

// Define all of our design utilities for dimensions here.
// Example classes: .w--normal, .h--normal, .w--auto, .h--auto, .w--none, etc

// Note, this is separate from the width helper, which outputs '.width--' classes (not .w-- classes)

// Design Utilities for Dimensions
$design-utilities-dimensions: (

    // Design - Dimensions
    'design-dimension-width': (
        enabled: true,
        responsive: 'md',
        properties: (
            'w':                            'width',
        ),
        values: '@sizes.size' // all references
        // values: '@sizes.size' 'small' 'normal' 'large', // limited references
    ),

    'design-dimension-height': (
        enabled: true,
        responsive: 'md',
        properties: (
            'h':                            'height',
        ),
        values: '@sizes.size' // all references
        // values: '@sizes.size' 'small' 'normal' 'large', // limited references
    ),

    'dimension-helpers': (
        enabled: true,
        responsive: 'md',
        properties: (
            'w':                            'width',
            'h':                            'height',
        ),
        values: (
            'auto':                         'auto',
            'none':                         0,
            'full':                         100%,
        ),
    ),

);

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