import styled from "styled-components";

export const editButtonStyle = {
  position: "absolute",
  top: "0",
  right: "0",
  backgroundColor: "#3e99ff",
  borderRadius: "0 0 0 20px",
  padding: ".4rem 1.2rem",
  outline: "none",
  color: "white",
  fontFamily: "Lato",
  textTransform: "uppercase",
};

export const panelStyle = {
  position: "relative",
  backgroundColor: "black",
  height: "100vh",
  width: "auto",
  padding: "0rem 3rem",
};

export const editModeStyle = {
  position: "absolute",
  top: "15%",
  right: "0",
  width: "1.5rem",
  height: "1.5rem",
  backgroundColor: "black",
  borderRadius: "100%",
  zIndex: "1000",
  cursor: "pointer",
};

export const editModeIconStyle = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translate(-50%, -50%)",
  width: "0.75rem",
  height: "0.75rem",
  borderRadius: "20%",
  zIndex: "101",
};

export const iconStyle = {
  width: "4rem",
  height: "auto",
  position: "absolute",
  top: "20%",
  left: "50%",
  transform: "translateX(-50%)",
  filter: "drop-shadow( 1px 1px 0.5px rgba(0, 0, 0, .25))",
};
export const nameStyle = {
  position: "absolute",
  top: "50%",
  left: "50%",
  transform: "translateX(-50%)",
};

export const formStyle = {
  position: "absolute",
  zIndex: "1000",
  width: "80rem",
  height: "10rem",
  padding: "1rem",
  margin: "1rem",
  borderRadius: "10%",
  boxShadow: "1px 1px 5px 2px #5d5d5d",
  backgroundColor: "#3e99ff",
};

export const addDeviceFormStyle = {
  maxWidth: "400px",
  background: "#3e99ff",
  paddingRight: "5rem",
};

export const StyledDiv = styled.div`
  background-color: white;
  padding: 3rem;
  width: 10rem;
  height: 10rem;
  border-radius: 100%;
  border: none;
  position: relative;
  box-shadow: 3px 2px 10px 5px #ccc;
  transition: all 0.3s ease-out;
  text-align: center;
  :hover {
    background-color: #f2f2f2;
  }
  :active {
    transform: translate(0.3px, 0.8px);
    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
  }
`;