<svelte:options
  customElement={{
    tag: 'm-container',
    props: {
      fluid: { reflect: true, type: 'Boolean', attribute: 'fluid' },
    },
  }}
/>

<script lang="ts">
  /**
   * The Container component is designed to wrap your page or section content, typically grids or other layout elements. By default, it centers the content with a maximum width to ensure consistent alignment and spacing.
   *
   * @slot default - Use this slot to insert the content of the container.
   */
  interface Props {
    /**
     * If `true`, the container will take the full width.
     */
    fluid?: boolean;
  }

  let { fluid }: Props = $props();
</script>

<div class={['ml-container', fluid && 'ml-container--fluid']}>
  <slot />
</div>

<style>/**
 * Do not edit directly, this file was auto-generated.
 */
.ml-container {
  padding-inline: 1rem;
  width: 100%;
  box-sizing: border-box;
  margin-inline: auto;
}
@media (width >= 680px) {
  .ml-container {
    padding-inline: 1.5rem;
  }
}
@media (width >= 1024px) {
  .ml-container {
    padding-inline: initial;
    max-width: 944px;
  }
}
@media (width >= 1280px) {
  .ml-container {
    max-width: 1200px;
  }
}
@media (width >= 1920px) {
  .ml-container {
    max-width: 1480px;
  }
}
.ml-container--fluid {
  max-width: none;
}
@media (width >= 1024px) {
  .ml-container--fluid {
    padding-inline: 2.5rem;
  }
}</style>
