.progressbar {
  touch-action: none;


      position: absolute;
      display: flex;
      justify-content: flex-start;
      bottom: 10px;
      width: 80%;
      height: 20px;
      background-color: gray;

      &.done {
            top: 0;
            width: 0px;
            height: 5px;
            background-color: red;
            z-index: 2;
      }

      &.mark {
            top: 0;
            background-color: transparent;
            border-right: 2px solid white;
            z-index: 3;
            pointer-events: none; 
      }
}

.segment {
  border: 3px solid black;
  background-color: red;
  margin: 1px;
  padding: 0;
  cursor: pointer;
  transition-duration: .25s;

  text-align: center;
}

.segment:first-child {
  margin-left: 2px;
}
.segment:last-child {
  margin-right: 2px;
}

.segment:hover {
  margin: 0px;
  border: 4px solid red;
  background-color: black;
  min-width: 10px;
  border-radius: 2px;
}