import { styled } from "../stitches.config";
import Box from "./Box";

const Flex = styled(Box, {
  display: "flex",
  variants: {
    row: {
      true: {
        flexDirection: "row",
      },
    },
    column: {
      true: {
        flexDirection: "column",
      },
    },
    fluid: {
      true: {
        width: "100%",
      },
    },
    align: {
      start: {
        alignItems: "start",
      },
      center: {
        alignItems: "center",
      },
      end: {
        alignItems: "end",
      },
    },
    justify: {
      start: {
        justifyContent: "start",
      },
      center: {
        justifyContent: "center",
      },
      end: {
        justifyContent: "end",
      },
      "space-between": {
        justifyContent: "space-between",
      },
      "space-around": {
        justifyContent: "space-around",
      },
    },
  },
});

export default Flex;