@layer reset, theme, layout;

@layer theme {
  :root {
    --layout-fluid-min: 35ch;
    --layout-default-repeat: 3;
    --layout-default-gap: 3vmax;
  }
}

@layer layout {
  /* Repeating grid and flexbox */

  .repeating-grid {
    --_grid-repeat: var(--grid-repeat, var(--layout-default-repeat));
    --_repeating-grid-gap: var(--grid-gap, var(--layout-default-gap));
    display: grid;
    grid-template-columns: repeat(var(--_grid-repeat), 1fr);
    gap: var(--_repeating-grid-gap);
  }

  .repeating-flex {
    --_flex-repeat: var(--flex-repeat, var(--layout-default-repeat));
    --_repeating-flex-gap: var(--flex-gap, var(--layout-default-gap));
    --_gap-count: calc(var(--_flex-repeat) - 1);
    --_gap-repeater-calc: calc(
      var(--_repeating-flex-gap) / var(--_flex-repeat) * var(--_gap-count)
    );

    display: flex;
    flex-wrap: wrap;
    gap: var(--_repeating-flex-gap);
    > * {
      flex: 1 1 calc((100% / var(--_flex-repeat)) - var(--_gap-repeater-calc));
    }
  }

  /* Fluid grid and flexbox */
  .fluid-grid {
    --_fluid-grid-min: var(--fluid-grid-min, var(--layout-fluid-min));
    --_fluid-grid-gap: var(--grid-gap, var(--layout-default-gap));

    display: grid;
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--_fluid-grid-min), 100%), 1fr)
    );
    gap: var(--_fluid-grid-gap);
  }

  .fluid-flex {
    --_fluid-flex-min: var(--fluid-flex-min, var(--layout-fluid-min));
    --_fluid-flex-gap: var(--flex-gap, var(--layout-default-gap));

    display: flex;
    flex-wrap: wrap;
    gap: var(--_fluid-flex-gap);
    > * {
      flex: 1 1 var(--_fluid-flex-min);
    }
  }

  /* Subgrid utility */
  .subgrid-rows {
    &:has(> :nth-child(1):last-child) {
      --_subgrid-rows: 1;
    }
    &:has(> :nth-child(2):last-child) {
      --_subgrid-rows: 2;
    }
    &:has(> :nth-child(3):last-child) {
      --_subgrid-rows: 3;
    }
    &:has(> :nth-child(4):last-child) {
      --_subgrid-rows: 4;
    }

    > * {
      display: grid;
      gap: var(--subgrid-gap, 0);
      grid-row: auto / span var(--subgrid-rows, var(--_subgrid-rows, 5));
      grid-template-rows: subgrid;
    }
  }

  :is(.fluid-grid:not(.subgrid-rows), .repeating-grid:not(.subgrid-rows), .repeating-flex, .fluid-flex)
    > * {
    container: var(--grid-item-container, grid-item) / inline-size;
  }
}

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body {
    margin: 0;
  }
}