export const container = {
    position: "relative",
    width: "25rem",
    height: "12rem",
    boxShadow: "22px 18px 54px -7px rgba(102,102,102,1)",
    borderRadius: "30px",
    backgroundColor: "white",
};

export const line = {
    width: "250px",
    height: "47px",
    borderBottom: "1px solid #646464",
    position: "absolute",
    left: "5%",
};

export const deviceName = {
    fontFamily: "Lato",
    position: "absolute",
    marginTop: "5%",
    marginLeft: "8%",
    fontSize: "1rem",
    fontWeight: "bold",
    color: "#646464",
};

export const targetTemperature = {
    fontFamily: "Lato",
    position: "absolute",
    marginTop: "20%",
    marginLeft: "50%",
    transform: "translate(-50%,-50%)",
    fontSize: "3.5rem",
    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: "4rem",
    height: "1rem",
    marginTop: "40%",
    marginLeft: "50%",
    transform: "translate(-50%,-50%)",
    padding: "0.5rem 4rem",
    backgroundColor: "rgba(94,246,152,1)",
    borderRadius: "50px",
};

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

export const toggle = {
    position: "absolute",
    top: "10%",
    left: "35%",
    transform: "rotate(-360deg)",
};