@import "./vars.pcss";

.grid {
  overflow: var(--gridOverflow);
  width: var(--gridWidth);
  display: var(--gridDisplay);
  gap: var(--gridGap);
  align-items: var(--gridAlignItems);
  justify-content: var(--gridJustifyContent);
  @mixin mb var(--gridMb);

  &ol,
  &ul {
    @mixin resetList;
  }

  &&--isFlex {
    --gridDisplay: flex;
    --gridItemWidth: calc((100% / var(--gridColumns)) - (var(--gridGap) / var(--gridColumns) * (var(--gridColumns) - 1)));
    flex-flow: row wrap;
  }

  &&--isGrid {
    --gridDisplay: grid;
    grid-template-columns: repeat(var(--gridColumns), minmax(0, 1fr));
  }

  &__item {
    display: var(--gridItemDisplay);
    flex-flow: var(--gridItemFlexFlow);
    align-self: var(--gridItemAlignSelf);
    width: var(--gridItemWidth);
    min-height: var(--gridItemMinHeight);
    margin: var(--gridItemMargin);
    overflow: var(--gridItemOverflow);
    order: var(--gridItemOrder);
  }
}