.check-statistics {
  position: relative;
  .card();
  .progress-bar();

  .check-attempt {
    display: inline-flex;
  }

  .bubble {
    &.top-left-aligned,
    &.top-right-aligned {
      &::before {
        visibility: hidden;
      }

      svg {
        position: absolute;
        top: -1em;
        width: 1em;
        height: 1em;

        .bg {
          fill: @body-bg-color;
        }

        .border {
          fill: @gray-light;
        }
      }
    }

    &.top-left-aligned {
      transform: unset;
      border-top-left-radius: 0;

      svg {
        left: -1px;
      }
    }

    &.top-right-aligned {
      transform: translate(-100%);
      border-top-right-radius: 0;

      svg {
        right: -1px;
      }
    }
  }

  // ATTENTION!: `&.progress-bar {` must not be used here, seems to confuse the less parser!!!!111

  &.progress-bar .timeline .progress.running {
    &::before,
    > .bar {
      background: @state-ok;
    }
  }

  &.progress-bar .check-timeline {
    margin-top: .5em;
  }
  &.progress-bar .above {
    margin-top: .5em;
  }

  .interval-line {
    position: absolute;
    height: 100%;

    &::before {
      position: absolute;
      top: ~"calc(50% - .125em)";
      display: block;
      height: .25em;
      width: 100%;
      content: "";

      background-color: @gray-light;
    }

    .vertical-key-value {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);

      padding: 0 .2em;
      background-color: @body-bg-color;
    }

    .start,
    .end {
      position: absolute;
      top: 50%;
      width: .25em;
      height: 1em;
      background-color: @gray;
    }

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

    .end {
      right: 0;
      transform: translate(50%, -50%);
    }
  }

  .execution-line .vertical-key-value {
    z-index: 1;
  }

  &.check-overdue {
    --duration-scale: 60%;
    --overlay-scale: 20%;

    .above {
      .now {
        position: absolute;
        right: var(--hPadding);
        bottom: 0;

        .bubble {
          // to move the center of the bubble to the end of the wrapper.
          transform: translate(50%, 0);
        }
      }
    }

    .timeline-overlay {
      background: linear-gradient(90deg, @gray-light 0, @color-down 2em);
      opacity: 1;

      &::after {
        background-color: @color-down;
      }
    }
  }

  &.checks-disabled.progress-bar {
    .timeline {
      .marker {
        &.highlighted {
          background-color: @gray;
        }
      }
    }
  }

  .checks-disabled-overlay {
    border-radius: 0.4em;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background-color: ~"@{disabled-gray}20";
    z-index: 1;

    .notes {
      color: @text-color-light;
      margin-top: -4em;
      text-shadow: 0 0 1px rgba(0, 0, 0, 0.25);
    }
  }
}

#layout.twocols &#col1,
#layout.minimal-layout,
#layout.poor-layout,
#layout.twocols.compact-layout,
#layout.twocols.default-layout {
  .check-statistics .bubble.top-right-aligned {
    transform: translate(-50%, 0); // default what progress-bar() defined
    border-top-right-radius: .25em; // default what progress-bar() defined

    &::before {
      visibility: visible;
    }

    svg {
      display: none;
    }
  }
}