////
///
/// Padding Utilities
/// ===========================================================================
///
/// Explicit padding override utilities.
/// One responsibility per file.
///
/// @group Utilities.Spacing
/// @author Scape Press
/// @link https://scape.style
/// @since 0.1.0 initial release
/// @access public
///
////

// ============================================================================
// Padding All
// ============================================================================

@layer ss.utilities {
    .ss-u-p-0 {
        padding: 0;
    }
    .ss-u-p-1 {
        padding: var(--ss-spacing-1);
    }
    .ss-u-p-2 {
        padding: var(--ss-spacing-2);
    }
    .ss-u-p-3 {
        padding: var(--ss-spacing-3);
    }
    .ss-u-p-4 {
        padding: var(--ss-spacing-4);
    }
    .ss-u-p-5 {
        padding: var(--ss-spacing-5);
    }
    .ss-u-p-6 {
        padding: var(--ss-spacing-6);
    }
    .ss-u-p-8 {
        padding: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Padding X (Horizontal)
    // ============================================================================
    
    .ss-u-px-0 {
        padding-inline: 0;
    }
    .ss-u-px-1 {
        padding-inline: var(--ss-spacing-1);
    }
    .ss-u-px-2 {
        padding-inline: var(--ss-spacing-2);
    }
    .ss-u-px-3 {
        padding-inline: var(--ss-spacing-3);
    }
    .ss-u-px-4 {
        padding-inline: var(--ss-spacing-4);
    }
    .ss-u-px-6 {
        padding-inline: var(--ss-spacing-6);
    }
    .ss-u-px-8 {
        padding-inline: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Padding Y (Vertical)
    // ============================================================================
    
    .ss-u-py-0 {
        padding-block: 0;
    }
    .ss-u-py-1 {
        padding-block: var(--ss-spacing-1);
    }
    .ss-u-py-2 {
        padding-block: var(--ss-spacing-2);
    }
    .ss-u-py-3 {
        padding-block: var(--ss-spacing-3);
    }
    .ss-u-py-4 {
        padding-block: var(--ss-spacing-4);
    }
    .ss-u-py-6 {
        padding-block: var(--ss-spacing-6);
    }
    .ss-u-py-8 {
        padding-block: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Padding Top
    // ============================================================================
    
    .ss-u-pt-0 {
        padding-top: 0;
    }
    .ss-u-pt-1 {
        padding-top: var(--ss-spacing-1);
    }
    .ss-u-pt-2 {
        padding-top: var(--ss-spacing-2);
    }
    .ss-u-pt-4 {
        padding-top: var(--ss-spacing-4);
    }
    .ss-u-pt-6 {
        padding-top: var(--ss-spacing-6);
    }
    .ss-u-pt-8 {
        padding-top: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Padding Bottom
    // ============================================================================
    
    .ss-u-pb-0 {
        padding-bottom: 0;
    }
    .ss-u-pb-1 {
        padding-bottom: var(--ss-spacing-1);
    }
    .ss-u-pb-2 {
        padding-bottom: var(--ss-spacing-2);
    }
    .ss-u-pb-4 {
        padding-bottom: var(--ss-spacing-4);
    }
    .ss-u-pb-6 {
        padding-bottom: var(--ss-spacing-6);
    }
    .ss-u-pb-8 {
        padding-bottom: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Padding Left
    // ============================================================================
    
    .ss-u-pl-0 {
        padding-left: 0;
    }
    .ss-u-pl-1 {
        padding-left: var(--ss-spacing-1);
    }
    .ss-u-pl-2 {
        padding-left: var(--ss-spacing-2);
    }
    .ss-u-pl-4 {
        padding-left: var(--ss-spacing-4);
    }
    
    // ============================================================================
    // Padding Right
    // ============================================================================
    
    .ss-u-pr-0 {
        padding-right: 0;
    }
    .ss-u-pr-1 {
        padding-right: var(--ss-spacing-1);
    }
    .ss-u-pr-2 {
        padding-right: var(--ss-spacing-2);
    }
    .ss-u-pr-4 {
        padding-right: var(--ss-spacing-4);
    }
}