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

/**
 * Page container
 *
 * 1. Avoid grid blowouts by specifying the `min-width` of the column.
 *    @see https://css-tricks.com/you-want-minmax10px-1fr-not-1fr/
 * 2. Attempts to fill the available area (assuming `height: 100%` is applied
 *    to all parent elements) & keep the footer at the bottom of that area.
 *    @see https://css-tricks.com/couple-takes-sticky-footer/#there-is-grid
 */

.o-page {
  display: grid;
  grid-template-columns: minmax(0, 1fr); // 1
  grid-template-rows: minmax(0, auto) 0 minmax(0, 1fr) minmax(0, auto); // 2
  min-block-size: 100%;
}

/**
 * These classes aren't strictly required, but they keep the HTML source a
 * little easier to read while also supporting swapping of source order if
 * that's ever something that content calls for.
 */

.o-page__header {
  grid-row: 1;
}

/**
 * An optional `alert` block can be used to pass an Alert component
 *
 * 1. Use a $factor of 0.5 to allow the alert to bleed more into the
 *    content margins instead of aligning with the content itself.
 * 2. Match the padding-inline for visual balance.
 * 3. Prevent this container from blocking interactions with content beneath
 *    its `z-index` layer in case the content within his hidden but not this
 *    containing element.
 */

.o-page__alert {
  @include spacing.fluid-padding-inline($factor: 0.5); // 1
  @include spacing.fluid-padding-block($factor: 0.5); // 2

  display: grid;
  grid-row: 2;
  inline-size: 100%;
  inset-block-end: 0;
  justify-content: center;
  pointer-events: none; // 3
  position: fixed;
  z-index: z-index.$alert;
}

/**
 * Restores pointer events for any page alert content.
 */

.o-page__alert > * {
  pointer-events: initial;
}

.o-page__content {
  grid-row: 3;
}

.o-page__footer {
  grid-row: 4;
}