@use "sass:map";
@use "../abstracts/config" as VAR;

// 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 VAR.$breakpoints {
    @media (min-width: $width) {
      max-width: $width - 100px;
    }
  }
  @include container-padding(1rem);
}

@if VAR.$generate-utility-classes {
  // Container classes
  #{VAR.$parent-selector} .container {
    @include container;
  }
}