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)',
};