.state-change {
  display: inline-flex;

  &.reversed-state-balls {
    // This is needed, because with ~ we can address only subsequent nodes
    flex-direction: row-reverse;
  }

  .state-ball {
    .box-shadow(0, 0, 0, 1px, @body-bg-color);
  }

  // Same on same
  .state-ball ~ .state-ball {
    &.ball-size-xs {
      margin-left: -.05em;
    }

    &.ball-size-s {
      margin-left: -.15em;
    }

    &.ball-size-m {
      margin-left: -.275em;
    }

    &.ball-size-ml {
      margin-left: -.375em;
    }

    &.ball-size-l,
    &.ball-size-xl {
      margin-left: -.875em;
    }
  }

  // big left, smaller right
  &:not(.reversed-state-balls) .ball-size-l ~ .state-ball {
    &.ball-size-ml {
      margin-top: .25em;
      margin-left: -.5em;
      margin-right: .25em;
    }
  }

  // smaller left, big right
  &.reversed-state-balls .ball-size-l ~ .state-ball {
    &.ball-size-ml {
      z-index: -1;
      margin-top: .25em;
      margin-right: -.5em;
    }
  }

  .state-ball.state-ok,
  .state-ball.state-up,
  .state-pending {
    &.ball-size-l,
    &.ball-size-xl {
      background-color: @body-bg-color;
    }
  }

  // Avoid transparency on overlapping solid state-change state-balls
  .state-ball.handled {
    position: relative;
    opacity: 1;

    i {
      position: relative;
      z-index: 3;
    }

    &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-radius: 50%;
      opacity: .6;
      z-index: 2
    }

    &:after {
      content: "";
      display: block;
      position: absolute;
      top: -2px;
      left: -2px;
      right: -2px;
      bottom: -2px;
      border-radius: 50%;
      background-color: @body-bg-color;
      z-index: 1;
    }

    &.state-pending:before {
      background-color: @color-pending;
    }

    &.state-down:before {
      background-color: @color-down;
    }

    &.state-warning:before {
      background-color: @color-warning;
    }

    &.state-critical:before {
      background-color: @color-critical;
    }

    &.state-unknown:before {
      background-color: @color-unknown;
    }
  }
}

.overdue .state-change .state-ball {
  .box-shadow(0, 0, 0, 1px, @gray-lighter);

  &.handled:after {
    background-color: @gray-lighter;
  }
}