@layer repui.layout {
  :root {
    --rui-spacing-none: 0;
    --rui-spacing-xs: var(--rui-space-1, 0.25rem);
    --rui-spacing-sm: var(--rui-space-2, 0.5rem);
    --rui-spacing-md: var(--rui-space-4, 1rem);
    --rui-spacing-lg: var(--rui-space-6, 1.5rem);
  }

  :where(html, body) {
    min-block-size: 100%;
  }

  :where(body) {
    min-block-size: 100dvh;
    margin: 0;
  }

  :where(.rui-container, .rui-grid, .rui-stack) {
    box-sizing: border-box;
    inline-size: 100%;
    block-size: 100%;
    min-inline-size: 0;
    min-block-size: 0;
    grid-column: span var(--rui-layout-column, 1);
    grid-row: span var(--rui-layout-row, 1);
  }

  :where(body > .rui-container) {
    min-block-size: 100dvh;
    block-size: 100dvh;
  }

  :where(.rui-grid) {
    display: grid;
    grid-template-columns:
      repeat(
        var(--rui-grid-columns, 1),
        var(--rui-grid-column-size, minmax(0, 1fr))
      );
    gap: var(--rui-layout-spacing, 0);
    align-items: stretch;
  }

  :where(.rui-stack) {
    display: grid;
    grid-template-rows: none;
    grid-auto-rows: max-content;
    gap: var(--rui-layout-spacing, 0);
    align-items: stretch;
  }

  :where(.rui-stack[data-rows]) {
    grid-template-rows:
      repeat(
        var(--rui-stack-rows),
        var(--rui-stack-row-size, minmax(0, 1fr))
      );
    grid-auto-rows: auto;
  }

  :where(.rui-grid[data-column-size="content"]) {
    justify-content: start;
  }

  :where(.rui-stack[data-row-size="content"]) {
    align-content: start;
  }

  :where([hidden]) {
    display: none !important;
  }
}