export const valueStyle = {
  fill: "#3e99ff",
  fontSize: "2.5rem",
  fontFamily: "Lato",
  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};

export const intensityLightStyle = {
  fill: "#ffd31d",
  fontSize: "1.2rem",
  fontFamily: "Lato",
  textShadow: "1px 1px 0.5px rgba(0, 0, 0, .2)",
};

export const textStyle = {
  position: "absolute",
  fill: "#ffd31d",
  fontSize: "1.5rem",
  fontFamily: "Lato",
  overflow: "hidden",
  whiteSpace: "nowrap",
  textOverflow: "ellipsis",
  userSelect: "none",
};

export const nameStyle = {
  fontSize: "1rem",
  position: "absolute",
  top: "30%",
  left: "50%",
  transform: "translateX(-50%)",
  color: "white",
  userSelect: "none",
};

export const LightDimmerStyle = {
  cursor: "pointer",
  marginTop: "1rem",
  width: "9rem",
  height: "9rem",
  fill: "#ffd31d",
};

export const LightDimmerContainer = {
  position: "relative",
  width: "9rem",
  height: "9rem",
};

export const CircularThumbStyle = {
  fill: "white",
  stroke: "#ffd31d",
  strokeWidth: ".2rem",
  r: "1.4rem",
};

export const KnobProgress = {
  stroke: "#ffd31d",
  strokeWidth: "3rem",
};

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