export const style = {
  width: '10rem',
  height: '10rem',
  position: 'absolute',
  top: '0',
  left: '0',
};

export const container = {
  width: '10rem',
  height: '10rem',
  borderRadius: '100%',
  border: 'none',
  position: 'relative',
};

export const sensorText = {
  fill: '#3e99ff',
  fontSize: '1.2rem',
  fontFamily: 'Lato',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  userSelect: 'none',
};

export const valueStyle = {
  fill: '#3e99ff',
  fontSize: '2.4rem',
  fontFamily: 'Lato',
  userSelect: 'none',
};

export const errorStyle = {
  fill: '#ff4050',
  fontSize: '1.5rem',
  fontFamily: 'Lato',
  textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
  userSelect: 'none',
};

export const motionSensorInnerCircle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  width: '8rem',
  height: '8rem',
  borderRadius: '100%',
  border: 'none',
};

export const motionSensorOuterCircle = {
  textAlign: 'center',
  cursor: 'pointer',
  position: 'relative',
  width: '10rem',
  height: '10rem',
  borderRadius: '100%',
  border: 'none',
  /* boxShadow: "3px 2px 10px 5px #ccc", */
};

export const nameMotionStyle = {
  position: 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translateX(-50%)',
  fontSize: '1.2rem',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
};

export const motionSensorIcon = {
  width: '2rem',
  height: '2rem',
  position: 'absolute',
  top: '15%',
  left: '50%',
  transform: 'translateX(-50%)',
};
export const temperatureSensorColors = {
  circle: '#323232',
  progress: '#ff1e56',
  text: 'white',
};

export const lightSensorColors = {
  circle: '#000839',
  progress: '#ffa41b',
  text: 'white',
};

export const humiditySensorColors = {
  circle: '#005082',
  progress: '#00a8cc',
  text: 'white',
};

export const iconSensorStyle = {
  position: 'absolute',
  top: '20%',
  left: '50%',
  transform: 'translateX(-50%)',
  width: '2rem',
  height: '2rem',
};