@use '../core/mediaqueries';

@mixin page-spacing {
  padding-inline: var(--sbb-page-spacing-padding, 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: var(
      --sbb-spacing-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-page-spacing-padding, 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;
}