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

export const KnobHolder = {
  marginTop: '1rem',
  cursor: 'pointer',
  padding: '3rem',
  backgroundColor: 'white',
  width: '10rem',
  height: '10rem',
};

export const KnobCircularTrack = {
  fill: 'white',
  stroke: '#1a2849',
};

export const KnobIcon = {
  fill: '#1a2849',
};

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

export const ValueStyle = {
  pointerEvents: 'none',
  fill: '#1a2849',
  fontSize: '1.3rem',
  fontFamily: 'Lato',
  textAnchor: 'middle',
  userSelect: 'none',
};

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

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

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

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