@use '../core/mediaqueries';

@mixin page-spacing {
  padding-inline: var(--sbb-layout-base-offset-responsive);
  margin-inline: auto;

  // If using page-spacing in flex context,
  // we would like to ensure it matches the width of the parent (should be full width).
  width: 100%;

  @include mediaqueries.mq($from: ultra) {
    // Subtract padding to get real max-width
    max-width: calc(
      var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive)
    );
  }
}

@mixin page-spacing-expanded {
  padding-inline: var(--sbb-spacing-responsive-xxs);
}

@mixin grid-base {
  display: grid;
  gap: var(--sbb-grid-base-gutter-responsive);
  grid-template-columns: repeat(var(--sbb-grid-base-columns), 1fr);
}

@mixin grid {
  @include grid-base;
  @include page-spacing;
}

@mixin grid-expanded {
  @include grid-base;
  @include page-spacing-expanded;
}