Fylo data storage component - CSS Flexbox

At the beginning I tried to use input type="range" to create the "used storage bar" but it is too difficult to customize it. So finally I used some div and span to do it. The bar can be controled with a custom property at line 25 --storage. I thought it would be easier after to get the data, to change only one property. I'd like to know if the "used storage bar" can be coded in a better way. I also have chosen to display the tooltip on hover on devices which can hover, and display it by default on devices which can't hover. Feel free to give any feedback.