Youtube progress bar segment styling

styling.js

const progressBar = document.querySelector('.ytp-progress-bar')

progressBar.addEventListener('mouseover', (event) => {

  const tooltipContent = document.querySelector(
    '.ytp-tooltip-title span'
  ).innerHTML


  if (tooltipContent !== '') {
    addStyles();
  }
})


function addStyles() {
  var style = document.createElement('style')
    style.innerHTML = `
      .ytp-tooltip-title {
        background: white;
        padding: 10px;
        color: black;
        border-radius: 5px;
        font-size: 1.5rem;
        box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
      }

      .ytp-tooltip-title span {
        text-shadow: none;
      }
    `
    document.head.appendChild(style)
}