// RIVER Design-System: Helpers - Layout / Container //

// A layout container to center content at a consistent width.
// The container provides a maximum width for inner content, while also providing padding at each breakpont.
// For smaller breakpoints we can also tell the container when to start being fluid.
// Variations: 'fluid'

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

    // Containers
    .layout-container {
        flex-grow: 1;
        width: 100%;
        max-width: 1170px;
        margin-left: auto;
        margin-right: auto;
        padding-left: design-variable('sizes.size.normal', 3rem);
        padding-right: design-variable('sizes.size.normal', 3rem);
    }

    // Variations
    .layout-container--2x-small {
        max-width: 560px;
    }
    .layout-container--x-small {
        max-width: 720px;
    }
    .layout-container--small {
        max-width: 960px;
    }
    .layout-container--large {
        max-width: 1280px;
    }
    .layout-container--x-large {
        max-width: 1366px;
    }
    .layout-container--2x-large {
        max-width: 1450px;
    }
    .layout-container--fluid {
        max-width: none;
    }

    // .layout-container {
    //     // Responsive
    //     @each $breakpoint, $width in design-breakpoints-upwards() {
    //         // Get the container width
    //         $containerWidth: $width - design-setting('responsive.breakpoint-snap', 20px); // eg, 1200px => 1180px container

    //         // Adjust container width based on our fluid-from option
    //         $containerFluidFrom: design-setting('responsive.fluid-from', false);
    //         @if($containerFluidFrom == true) {
    //             $containerWidth: 100%;
    //         }
    //         @if($containerFluidFrom and not($containerFluidFrom == true)) {
    //             $containerWidth: if($width <= design-breakpoint-value($containerFluidFrom), 100%, $containerWidth);
    //         }

    //         @include design-breakpoint-up($breakpoint) {
    //             max-width: $containerWidth;
    //         }
    //     }
    // }
}