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

// ============================================================================
// Margin All
// ============================================================================

@layer ss.utilities {
    .ss-u-m-0 {
        margin: 0;
    }
    .ss-u-m-auto {
        margin: auto;
    }
    .ss-u-m-1 {
        margin: var(--ss-spacing-1);
    }
    .ss-u-m-2 {
        margin: var(--ss-spacing-2);
    }
    .ss-u-m-3 {
        margin: var(--ss-spacing-3);
    }
    .ss-u-m-4 {
        margin: var(--ss-spacing-4);
    }
    .ss-u-m-5 {
        margin: var(--ss-spacing-5);
    }
    .ss-u-m-6 {
        margin: var(--ss-spacing-6);
    }
    .ss-u-m-8 {
        margin: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Margin X (Horizontal)
    // ============================================================================
    
    .ss-u-mx-0 {
        margin-inline: 0;
    }
    .ss-u-mx-auto {
        margin-inline: auto;
    }
    .ss-u-mx-1 {
        margin-inline: var(--ss-spacing-1);
    }
    .ss-u-mx-2 {
        margin-inline: var(--ss-spacing-2);
    }
    .ss-u-mx-3 {
        margin-inline: var(--ss-spacing-3);
    }
    .ss-u-mx-4 {
        margin-inline: var(--ss-spacing-4);
    }
    .ss-u-mx-6 {
        margin-inline: var(--ss-spacing-6);
    }
    .ss-u-mx-8 {
        margin-inline: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Margin Y (Vertical)
    // ============================================================================
    
    .ss-u-my-0 {
        margin-block: 0;
    }
    .ss-u-my-auto {
        margin-block: auto;
    }
    .ss-u-my-1 {
        margin-block: var(--ss-spacing-1);
    }
    .ss-u-my-2 {
        margin-block: var(--ss-spacing-2);
    }
    .ss-u-my-3 {
        margin-block: var(--ss-spacing-3);
    }
    .ss-u-my-4 {
        margin-block: var(--ss-spacing-4);
    }
    .ss-u-my-6 {
        margin-block: var(--ss-spacing-6);
    }
    .ss-u-my-8 {
        margin-block: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Margin Top
    // ============================================================================
    
    .ss-u-mt-0 {
        margin-top: 0;
    }
    .ss-u-mt-auto {
        margin-top: auto;
    }
    .ss-u-mt-1 {
        margin-top: var(--ss-spacing-1);
    }
    .ss-u-mt-2 {
        margin-top: var(--ss-spacing-2);
    }
    .ss-u-mt-4 {
        margin-top: var(--ss-spacing-4);
    }
    .ss-u-mt-6 {
        margin-top: var(--ss-spacing-6);
    }
    .ss-u-mt-8 {
        margin-top: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Margin Bottom
    // ============================================================================
    
    .ss-u-mb-0 {
        margin-bottom: 0;
    }
    .ss-u-mb-auto {
        margin-bottom: auto;
    }
    .ss-u-mb-1 {
        margin-bottom: var(--ss-spacing-1);
    }
    .ss-u-mb-2 {
        margin-bottom: var(--ss-spacing-2);
    }
    .ss-u-mb-4 {
        margin-bottom: var(--ss-spacing-4);
    }
    .ss-u-mb-6 {
        margin-bottom: var(--ss-spacing-6);
    }
    .ss-u-mb-8 {
        margin-bottom: var(--ss-spacing-8);
    }
    
    // ============================================================================
    // Margin Left
    // ============================================================================
    
    .ss-u-ml-0 {
        margin-left: 0;
    }
    .ss-u-ml-auto {
        margin-left: auto;
    }
    .ss-u-ml-1 {
        margin-left: var(--ss-spacing-1);
    }
    .ss-u-ml-2 {
        margin-left: var(--ss-spacing-2);
    }
    .ss-u-ml-4 {
        margin-left: var(--ss-spacing-4);
    }
    
    // ============================================================================
    // Margin Right
    // ============================================================================
    
    .ss-u-mr-0 {
        margin-right: 0;
    }
    .ss-u-mr-auto {
        margin-right: auto;
    }
    .ss-u-mr-1 {
        margin-right: var(--ss-spacing-1);
    }
    .ss-u-mr-2 {
        margin-right: var(--ss-spacing-2);
    }
    .ss-u-mr-4 {
        margin-right: var(--ss-spacing-4);
    }
}