@use "sass:map";
@use "../config/feature-flags" as config-flags;
@use "../config/breakpoints" as config-breakpoint;
@use "../functions/feature-flags" as fn-flags;

// Base container styles
@mixin container-base {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@mixin container-padding($padding) {
    padding-top: $padding;
    padding-bottom: $padding;
}

// Responsive container mixin
@mixin container($display: block) {
    display: $display;
    @include container-base;
    @each $breakpoint, $width in config-breakpoint.$breakpoints {
        @media (min-width: $width) {
            max-width: $width - 100px;
        }
    }
    @include container-padding(1rem);
}

@if fn-flags.feature-enabled("container") {
    // Container classes
    #{config-flags.$parent-selector} .container {
        @include container;
    }
    #{config-flags.$parent-selector} .container.flex {
        @include container(flex);
    }
    #{config-flags.$parent-selector} .container.grid {
        @include container(grid);
    }
}