import { style } from "@vanilla-extract/css";

export const zoneContainer = style({
  margin: "0.5em 1em",
  backgroundColor: "#222",
  padding: "1em",
  boxSizing: "border-box",
});

export const zoneHeader = style({
  display: "flex",
});

export const chartTileTotal = style({
  textAlign: "center",
  lineHeight: 1,
  minWidth: "2em",
  maxWidth: "2em",
  fontSize: "3rem",
  overflowY: "hidden",
});

export const chartTilePopLine = style({
  display: "flex",
  fontSize: "1.5rem",
  fontWeight: "bold",
  alignItems: "center",
  justifyContent: "center",
  lineHeight: 1.1,
  margin: 0,
});

export const chartTilePopImage = style({
  width: "1em",
  // height: "1em",
  marginRight: 4,
});

export const chartTile = style({
  fontSize: "4rem",
  flex: "0 3 33%",
  display: "flex",
  marginTop: "0.2em",
});

export const classesContainer = style({
  display: "flex",
  flex: "1 3 100%",
  flexWrap: "wrap",
  justifyContent: "space-evenly",
});

export const chartTileChart = style({
  display: "flex",
  flexDirection: "column",
  alignItems: "center",
  justifyContent: "center",
});