icingadb-web/public/css/mixin/progress-bar.less

.progress-bar() {
  &.progress-bar {
    --hPadding: 10%;
    --duration-scale: 80%;

    .above,
    .below {
      list-style-type: none;
      margin: 0;
      padding: 0;

      position: relative;
      height: ~"calc(2em + 2px)";
    }

    .below {
      > .left { // positions with left property
        position: absolute;
        left: var(--hPadding);
        top: 0;
      }

      > .right { // positions with right property
        position: absolute;
        right: ~"calc(100% - calc(var(--hPadding) + var(--duration-scale)))";
        top: 0;
      }
    }

    .positioned {
      position: absolute;
    }

    .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: -7/12em;
        transform: rotate(225deg);
      }

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

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

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

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

    .left .bubble {
      transform: translate(-50%, 0);
    }

    .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 {
      @marker-gap: 1/12em;

      .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;
        width: .857em;
        z-index: 2;

        position: absolute;
        top: @marker-gap;

        &.highlighted {
          background-color: @icinga-blue;
        }

        &.left {
          left: var(--hPadding);
        }

        &.right {
          left: ~"calc(var(--hPadding) + var(--duration-scale))";
        }
      }

      .progress {
        position: absolute;
        left: var(--hPadding);
        width: var(--duration-scale);

        &[data-animate-progress]::before {
          content: "";
          display: block;
          width: .5em + @marker-gap;
          height: 1em + (@marker-gap * 2);
          margin-top: -@marker-gap;

          .rounded-corners(.5em);
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;

          position: absolute;
          left: -.5em - @marker-gap;
        }

        > .bar {
          width: 0; // set by progress-bar.js
          height: 1em + (@marker-gap * 2);
          margin-top: -@marker-gap;
        }

        &::before,
        > .bar {
          background-color: @gray-light;
        }
      }

      .timeline-overlay {
        position: absolute;
        left: ~"calc(var(--hPadding) + var(--duration-scale))";
        width: var(--overlay-scale);
        height: 1em + (@marker-gap * 2);
        margin-top: -@marker-gap;

        opacity: .6;
      }

      .progress > .bar,
      .timeline-overlay {
        display: flex;
        justify-content: flex-end;

        .now {
          width: .25em;

          border: solid @default-bg;
          border-width: 1px 0 1px 0;
          background-color: red;
        }
      }
    }
  }
}