export const valueStyle = {
  fill: '#3e99ff',
  fontSize: '2.5rem',
  fontFamily: 'Lato',
  textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
};

export const intensityLightStyle = {
  fill: '#ffd31d',
  fontSize: '1.2rem',
  fontFamily: 'Lato',
  textShadow: '1px 1px 0.5px rgba(0, 0, 0, .2)',
};

export const textStyle = {
  position: 'absolute',
  fill: '#ffd31d',
  fontSize: '1.5rem',
  fontFamily: 'Lato',
  overflow: 'hidden',
  whiteSpace: 'nowrap',
  textOverflow: 'ellipsis',
  userSelect: 'none',
};

export const nameStyle = {
  fontSize: '1rem',
  position: 'absolute',
  top: '30%',
  left: '50%',
  transform: 'translateX(-50%)',
  color: 'white',
  userSelect: 'none',
};

export const LightDimmerStyle = {
  cursor: 'pointer',
  marginTop: '1rem',
  width: '9rem',
  height: '9rem',
  fill: '#ffd31d',
};

export const LightDimmerContainer = {
  position: 'relative',
  width: '9rem',
  height: '9rem',
};

export const CircularThumbStyle = {
  fill: 'white',
  stroke: '#ffd31d',
  strokeWidth: '.2rem',
  r: '1.4rem',
};

export const KnobProgress = {
  stroke: '#ffd31d',
  strokeWidth: '3rem',
};

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