@use '../../compiled/tokens/scss/size';
@use '../../mixins/spacing';

/**
 * There are no default styles for `o-container`. It acts as a wrapper so that
 * we can add space utilities to the container without interfering with the
 * margins for `o-container__content`.
 */

/**
 * Modifiers for `o-container` that add some standard, responsive padding.
 */

.o-container--pad,
.o-container--pad-block {
  @include spacing.fluid-padding-block;
}

.o-container--pad,
.o-container--pad-inline {
  @include spacing.fluid-padding-inline;
}

/**
 * Content container, where the width is actually applied.
 */

.o-container__content {
  margin: 0 auto;
  max-inline-size: size.$max-width-spread;
}

/**
 * Prose modifier adjusts content `max-width`
 */

.o-container--prose {
  .o-container__content {
    max-inline-size: size.$max-width-prose;
  }
}

/**
 * Child elements that need a bit of inline padding to avoid the viewport edge.
 */

.o-container__pad {
  .o-container--pad &,
  .o-container--pad-inline & {
    @include spacing.fluid-padding-inline;
  }
}

/**
 * Child elements intended to "fill" the container width. This negates any
 * inline padding and border radii.
 */

.o-container__fill,
.o-container__fill-pad {
  .o-container--pad &,
  .o-container--pad-inline & {
    @include spacing.fluid-margin-inline-negative;
  }
}

/**
 * The `__fill-pad` element differs from the `__fill` element in that it
 * restores the parent element's padding (if any). This may be useful for cards
 * and theme containers with inner content that wouldn't align with what was
 * adjacent otherwise.
 */

.o-container__fill-pad {
  .o-container--pad &,
  .o-container--pad-inline & {
    @include spacing.fluid-padding-inline;
  }
}