// RIVER Design-System: Preload - Layout / Section //

// A layout section with vertical padding.
// The section has top and bottom padding which adjusts responsively.
// Variations: 'small', 'large', 'nopadding'

@if(design-setting('helpers') and design-setting('helpers.layout-section', false)) {
    /* RIVER Design-System: Helpers - Layout / Section */

    // Sections
    .layout-section {
        // Variables
        --layout-section--padding: #{design-variable('sizes.size.layout-normal', 12rem)};
        --layout-section--padding-multiplier: 0.5;

        // Styling
        position: relative;
        clear: both;
        padding-top: calc(var(--layout-section--padding) * var(--layout-section--padding-multiplier));
        padding-bottom: calc(var(--layout-section--padding) * var(--layout-section--padding-multiplier));

        // Padding Variations
        &:where(.layout-section--small) {
            --layout-section--padding: calc(#{design-variable('sizes.size.layout-normal', 12rem)} * 0.5);
        }
        &:where(.layout-section--large) {
            --layout-section--padding: calc(#{design-variable('sizes.size.layout-normal', 12rem)} * 2);
        }
        &:where(.layout-section--nopadding) {
            --layout-section--padding: 0 !important;
        }

        // Responsive
        @include design-breakpoint-up(md) {
            --layout-section--padding-multiplier: 0.75;
        }
        @include design-breakpoint-up(lg) {
            --layout-section--padding-multiplier: 1.0;
        }
    }

    // Remove padding between corresponding sections
    .layout-section:where(.layout-section + .layout-section) {
        // Keep specificity lower than a single utility class (eg, .pt--normal)
        padding-top: 0;
    }

}