.tracker-bar {
  width: 100%;
  display: flex;
  flex-direction: row;

  --div-left-color: var(--box-bg);
  --div-right-color: var(--box-bg);
  --stage-color: var(--box-bg);

  font-size: clamp(5px, 2.5vw, 15px);
  height: clamp(15px, 7.5vw, 45px);

  .stage {
    overflow: hidden;
    border-top: solid 2px var(--stat-box-bg);
    border-bottom: solid 2px var(--stat-box-bg);
    background: var(--stage-color);
    color: var(--transparent-fg);
    padding: 1em;
    flex-grow: 1;
    flex-shrink: 1;
    overflow: hidden;
    text-wrap: nowrap;
    text-overflow: hidden;
    white-space: no-break;
    display: flex;
    align-items: center;
    justify-content: center;

    &:first-child {
      border-left: solid 2px var(--stat-box-bg);
      border-top-left-radius: 1.6em;
      border-bottom-left-radius: 1.6em;
      padding-left: 1.6em;
    }
    &:last-child {
      border-right: solid 2px var(--stat-box-bg);
      border-top-right-radius: 1.6em;
      border-bottom-right-radius: 1.6em;
    }
    &:nth-child(4n + 3) {
      --stage-color: var(--secondary);
    }
    &.done {
      --stage-color: var(--primary);
      color: white;
    }
    &.current {
      --stage-color: var(--tertiary);
      color: white;
    }
    &.next {
      animation: 1s linear alternate infinite pulse-next;
    }
  }

  .divider {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    flex-grow: 0;
    background: var(--stat-box-bg);
    border-top: solid 2px var(--stat-box-bg);
    border-bottom: solid 2px var(--stat-box-bg);

    &.left-done {
      --div-left-color: var(--primary);
    }
    &.left-current {
      --div-left-color: var(--tertiary);
    }
    &.left-blank, &.left-next {
      &:nth-child(4n + 0) {
        --div-left-color: var(--secondary);
      }
    }
    &.left-next {
      animation: 1s linear alternate infinite pulse-next-top;
    }
    &.right-done {
      --div-right-color: var(--primary);
    }
    &.right-current {
      --div-right-color: var(--tertiary);
    }
    &.right-blank, &.right-next {
      &:nth-child(4n + 2) {
        --div-right-color: var(--secondary);
      }
    }
    &.right-next {
      animation: 1s linear alternate infinite pulse-next-bottom;
    }

    &::after, &::before {
      content: '';
      width: 100%;
      height: 100%;
      display: block;
      position: absolute;
      transform: skew(160deg) translate(58%);
      background: var(--div-right-color);
    }
    &::before {
      transform: skew(160deg) translate(-58%);
      background: var(--div-left-color);
    }

    width: clamp(5px, 2.5vw, 15px);
  }

  &.transitions {
    .stage, .divider, .divider::before, .divider::after {
      transition: color 500ms, border-color 500ms, background-color 500ms;
    }
  }
}

@keyframes pulse-next {
  to {
    border-color: var(--tertiary);
    text-shadow: 0 0 0.8em var(--tertiary);
  }
}

@keyframes pulse-next-top {
  to {
    border-top-color: var(--tertiary);
  }
}

@keyframes pulse-next-bottom {
  to {
    border-bottom-color: var(--tertiary);
  }
}