export const style = {
  width: "10rem",
  height: "10rem",
  position: "absolute",
  top: "0",
  left: "0",
};

export const container = {
  width: "10rem",
  height: "10rem",
  borderRadius: "100%",
  border: "none",
  position: "relative",
};

export const sensorText = {
  fill: "#3e99ff",
  fontSize: "1.2rem",
  fontFamily: "Lato",
  overflow: "hidden",
  whiteSpace: "nowrap",
  textOverflow: "ellipsis",
  userSelect: "none",
};

export const valueStyle = {
  fill: "#3e99ff",
  fontSize: "2.4rem",
  fontFamily: "Lato",
  userSelect: "none",
};

export const errorStyle = {
  fill: "#ff4050",
  fontSize: "1.5rem",
  fontFamily: "Lato",
  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
  userSelect: "none",
};

export const motionSensorInnerCircle = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: "8rem",
  height: "8rem",
  borderRadius: "100%",
  border: "none",
};

export const motionSensorOuterCircle = {
  textAlign: "center",
  cursor: "pointer",
  position: "relative",
  width: "10rem",
  height: "10rem",
  borderRadius: "100%",
  border: "none",
  /*boxShadow: "3px 2px 10px 5px #ccc",*/
};

export const nameMotionStyle = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translateX(-50%)",
  fontSize: "1.2rem",
  overflow: "hidden",
  whiteSpace: "nowrap",
  textOverflow: "ellipsis",
};

export const motionSensorIcon = {
  width: "2rem",
  height: "2rem",
  position: "absolute",
  top: "15%",
  left: "50%",
  transform: "translateX(-50%)",
};
export const temperatureSensorColors = {
  circle: "#323232",
  progress: "#ff1e56",
  text: "white",
};

export const lightSensorColors = {
  circle: "#000839",
  progress: "#ffa41b",
  text: "white",
};

export const humiditySensorColors = {
  circle: "#005082",
  progress: "#00a8cc",
  text: "white",
};

export const iconSensorStyle = {
  position: "absolute",
  top: "20%",
  left: "50%",
  transform: "translateX(-50%)",
  width: "2rem",
  height: "2rem",
};