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

export const KnobHolder = {
  marginTop: "1rem",
  cursor: "pointer",
  padding: "3rem",
  backgroundColor: "white",
  width: "10rem",
  height: "10rem",
};

export const KnobCircularTrack = {
  fill: "white",
  stroke: "#1a2849",
};

export const KnobIcon = {
  fill: "#1a2849",
};

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

export const ValueStyle = {
  pointerEvents: "none",
  fill: "#1a2849",
  fontSize: "1.3rem",
  fontFamily: "Lato",
  textAnchor: "middle",
};

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

export const textStyle = {
  position: "absolute",
  fill: "#1a2849",
  fontSize: "1.5rem",
  fontFamily: "Lato",
};

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

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