.progress-bar() {
  &.progress-bar {
    .above,
    .below {
      list-style-type: none;
      position: relative;
      margin: 0;
    }

    .above {
      padding: ~"calc(1em + 1px) 10%";
    }

    .below {
      padding: 1.25em 10%;
    }

    .positioned {
      position: absolute;
    }

    :not(.positioned).end .bubble {
      // to move the center of the bubble to the end of the wrapper (for check-statistics end bubble only).
      transform: translate(50%, 0);
    }

    .bubble {
      .rounded-corners(.25em);
      background-color: @body-bg-color;
      border: 1px solid;
      border-color: @gray-light;
      position: relative;
      box-shadow: 0 0 1em 0 rgba(0, 0, 0, .1);
      padding: .25em .5em;
      text-align: center;
      width: auto;
      // The wrapper of .bubble is dynamically moved to the left based on the value of the progress bar
      // This moves the center of the bubble to the beginning of the wrapper regardless of the size of the content.
      transform: translate(-50%, 0);
      z-index: 1;

      > * {
        position: relative;
        z-index: 2;
      }

      &:hover {
        z-index: 5;
      }

      &:before {
        background-color: @body-bg-color;
        border-bottom: 1px solid @gray-light;
        border-right: 1px solid @gray-light;
        content: "";
        display: block;
        height: 1em;
        margin-left: -.5em;
        transform: rotate(45deg);
        width: 1em;
        z-index: 1;

        position: absolute;
        bottom: -.5em;
        left: 50%;
      }

      &.upwards:before {
        bottom: auto;
        top: -.5em;
        transform: rotate(225deg);
      }

      &.right {
        // This is (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
        transform: translate(~"calc(-1.175em - 1px)", 0);
      }

      &.right:before {
        bottom: auto;
        left: 1.175em;
        top: -.5em;
      }

      &.left {
        // entire width (moves the right border in place of the left) + (.675em (:before placement) + .5em (half :before width)) + 1px (:before border)
        transform: translate(~"calc(-100% + 1.175em + 1px)", 0);
      }

      &.left:before {
        bottom: auto;
        left: auto;
        right: .675em;
        top: -.5em;
      }
    }

    .above .positioned {
      bottom: 0;
    }

    .below .positioned {
      top: 0;
    }

    .vertical-key-value {
      .key {
        white-space: nowrap;
      }

      .value {
        white-space: nowrap;
        font-size: 1em;
        line-height: 1;
      }
    }

    .timeline {
      .rounded-corners(.5em);
      background-color: @gray-lighter;
      height: 1em;
      margin: 1em 0;
      position: relative;
      width: 100%;
      z-index: 1;

      .marker {
        .rounded-corners(50%);
        background-color: @gray-light;
        height: .857em;
        margin-left: -.857/2em;
        margin-top: -1/12em;
        width: .857em;
        z-index: 2;

        position: absolute;
        top: 2/12em;

        &.now {
          background-color: @gray;
        }

        &.start,
        &.end {
          background-color: @icinga-blue;
        }
      }
    }

    .timeline-overlay {
      height: 100%;
      opacity: .6;
      position: absolute;

      &:before,
      &:after {
        content: "";
        display: block;
        height: 1em;
        width: .5em;

        position: absolute;
        top: 0;
      }

      &:before {
        border-bottom-left-radius: .5em;
        border-top-left-radius: .5em;
        left: -.5em;
      }

      &:after {
        border-bottom-right-radius: .5em;
        border-top-right-radius: .5em;
        right: -.5em;
      }
    }
  }
}
