@use "../../../styles/spacing.scss";
@use "sass:map";

.container {
  display: flex;
  width: 100%;
  height: 100%;

  // border
  border-color: var(--AutoLayout-border-color);

  // colors
  background-color: var(--AutoLayout-bg);
  color: var(--AutoLayout-fg, inherit);
}

// map of justifications and alignments
$alignments: (
  "topLeft": (
    "justify": flex-start,
    "align": flex-start,
  ),
  "topCenter": (
    "justify": flex-start,
    "align": center,
  ),
  "topRight": (
    "justify": flex-start,
    "align": flex-end,
  ),
  "left": (
    "justify": center,
    "align": flex-start,
  ),
  "center": (
    "justify": center,
    "align": center,
  ),
  "right": (
    "justify": center,
    "align": flex-end,
  ),
  "bottomLeft": (
    "justify": flex-end,
    "align": flex-start,
  ),
  "bottomCenter": (
    "justify": flex-end,
    "align": center,
  ),
  "bottomRight": (
    "justify": flex-end,
    "align": flex-end,
  ),
);

// how to interpret the map of justifications and alignments depending on
// dirction
$directions: (
  "vertical": (
    "direction": column,
    "justification": "justify",
    "alignment": "align",
  ),
  "horizontal": (
    "direction": row,
    "justification": "align",
    "alignment": "justify",
  ),
);

@each $name, $config in $directions {
  .direction-#{$name} {
    flex-direction: map.get($config, "direction");

    @each $alignment, $params in $alignments {
      &.align-#{$alignment} {
        justify-content: map.get(
          $params,
          map.get($config, "justification")
        );
        align-items: map.get($params, map.get($config, "alignment"));
      }
    }

    // Special gap handline for space-between
    &.gap-space-between {
      justify-content: space-between;
    }
  }
}

// Baseline alignment only allowed for horizontal layouts
.direction-horizontal.align-baseline {
  align-items: baseline;
}

@each $spacing, $space in spacing.$spacings {
  .gap-#{$spacing} {
    gap: $space;
  }
}

.wrapForward {
  flex-wrap: wrap;
}

.wrapReverse {
  flex-wrap: wrap-reverse;
}

.wrapNone {
  flex-wrap: nowrap;
}