@use "../abstract/variables";
@use "../abstract/functions" as fns;
@use "../abstract/mixins";

.o-#{fns.get-ns()}Container {
  --padding: var(--aml-size-md);
  --breakout: var(--aml-size-xl);
  --content: var(--aml-max-site-width);

  --_breakout: minmax(0, var(--breakout));
  --_content: min(100% - var(--padding) * 2, var(--content));

  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--padding), 1fr)
    [breakout-start] var(--_breakout)
    [content-start] var(--_content) [content-end]
    var(--_breakout) [breakout-end]
    minmax(var(--padding), 1fr) [full-end];

  > * {
    grid-column: content;
  }

  // Allow children to breakout of the container a bit
  > :where(.breakout) {
    grid-column: breakout;
  }

  // Allow children to occupy the full width if needed
  > :where(.full-width) {
    grid-column: full;
  }
}

.o-#{fns.get-ns()}Container--flush {
  @include mixins.bp-variants {
    --padding: 0;
  }
}

@each $size, $value in variables.$sizes {
  @if $size != "default" {
    .o-#{fns.get-ns()}Container--#{$size} {
      @include mixins.bp-variants {
        --padding: var(--aml-size-#{$size});
      }
    }
  }
}