#trigger-progress-bar {

  position: fixed;
  top: var(--header-height);
  width: 100%;
  height: 25px;
  z-index: 5;

}

#progress-bar {

  width: 100%;
  height: 7px;
  transition: all 0.2s linear;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  cursor: default;

}

#trigger-progress-bar:hover #progress-bar {

  height: 25px;

}

#bar {

  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  height: inherit;
  width: 0%;
  background-color: var(--green);
  box-sizing: border-box;
  padding: 0 10px;

}

#bar p {

  color: var(--dark-green);
  mix-blend-mode: difference;
  opacity: 0;
  margin: 0;
  padding: 0;
  transition: all 0.2s linear;
  white-space: nowrap;

}

#trigger-progress-bar:hover #progress-bar #bar p {

  opacity: 1;

}