@use "sass:list";
@use "functions" as *;

// css variables exposed globally:
// --layout-column-count: columns count in the layout
// --layout-column-gap: gap size between columns
// --layout-margin: layout margin size (left or right)
// --layout-width: 100vw minus 2 * --layout-margin
// --layout-column-width: size of a single column

// css classes exposed globally:
// .layout-block: element takes the whole layout width
// .layout-grid: extends .layout-block with grid behaviour using layout settings

@use "sass:map";

// config to fill
// 'variable': (mobile, desktop)
$layout: (
  "columns-count": (
    12,
  ),
  "columns-gap": (
    20px,
  ),
  "margin": (
    20px,
  ),
);

//internal process, do not touch
:root {
  --layout-column-count: #{list.nth(map.get($layout, "columns-count"), 1)};
  --layout-column-gap: #{list.nth(map.get($layout, "columns-gap"), 1)};
  --layout-margin: #{list.nth(map.get($layout, "margin"), 1)};
  --layout-width: calc(100vw - (2 * var(--layout-margin)));
  --layout-column-width: calc(
    (
        var(--layout-width) -
          ((var(--layout-column-count) - 1) * var(--layout-column-gap))
      ) / var(--layout-column-count)
  );
}

.layout-block {
  padding-left: var(--layout-margin);
  padding-right: var(--layout-margin);
  width: 100%;
}

.layout-grid {
  @extend .layout-block;

  display: grid;
  grid-template-columns: repeat(var(--layout-column-count), minmax(0, 1fr));
  grid-gap: var(--layout-column-gap);
}