<script>export let direction = "row";
export let align = "center";
export let justify = "center";
export let reverse = false;
const alignMap = {
  start: "flex-start",
  center: "center",
  end: "flex-end",
  stretch: "stretch"
};
const justifyMap = {
  start: "flex-start",
  center: "center",
  end: "flex-end",
  around: "space-around",
  between: "space-between",
  evenly: "space-evenly"
};
$:
  directionWithReverse = reverse ? `${direction}-reverse` : direction;
</script>

<div
  {...$$restProps}
  style:display="flex"
  style:flex-direction={directionWithReverse}
  style:align-items={alignMap[align]}
  style:justify-content={justifyMap[justify]}
  class={$$restProps.class}
>
  <slot />
</div>
