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: "#fafafa",
  height: "100%",
  width: "auto",
  padding: "3rem",
};

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

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 .3s ease-out;
  :hover{
    background-color : #f2f2f2;
  }
  :active{
    transform : translate(0.3px, 0.8px);
    box-shadow: 0.5px 0.5px 7px 3.5px #ccc;
  }
`;