export const container = {
  margin: "-1em 0",
  width: "15em",
  height: "15.5em",
  boxShadow: "5px 5px 5px 5px #DDD",
  borderRadius: "1em",
  backgroundColor: "white",
  transform: "translate(-2.5em, 0)",
};

export const deviceName = {
  paddingTop: ".5rem",
  paddingLeft: "1rem",
  fontFamily: "Lato",
  fontSize: "1rem",
  fontWeight: "bold",
};

export const targetTemperature = {
  fontFamily: "Lato",
  marginTop: ".5rem",
  width: "100%",
  textAlign: "center",
  fontSize: "1.3rem",
  fontWeight: "bold",
  color: "#646464",
};

export const slider = {
  width: "25rem",
  fontFamily: "Lato",
  position: "absolute",
  marginTop: "35%",
  marginLeft: "50%",
  transform: "translate(-50%,-50%)",
};

export const stateTagContainer = {
  textAlign: "center",
  position: "absolute",
  width: "10rem",
  height: "2rem",
  bottom: "-.25rem",
  left: "50%",
  transform: "translate(-50%,-50%)",
  backgroundColor: "#2b2",
  borderRadius: "50px",
};

export const stateTag = {
  fontFamily: "Lato",
  fontSize: "1.2rem",
  lineHeight: "2rem",
  color: "white",
  textTransform: "uppercase",
};

export const toggle = {
  position: "absolute",
  top: ".7rem",
  right: "2.5rem",
  transform: "rotate(-360deg)",
};