.view-data {
  position: absolute;
  width: max-content;
  top: -16px;
  left: -20px;
  cursor: pointer;
  overflow: hidden;

  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .toplevel.selected &,
  .node.hovering & {
    overflow: visible;
  }

  &.show-worker-stats {
    left: -90px;
  }

  .worker-stats {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;

    .label,
    .count {
      display: inline-block;

      line-height: 16px;
      font-size: 8px;
      color: $white1;
    }

    .count {
      width: 16px;
      height: 16px;
      border-radius: 8px;

      margin-left: 4px;

      background-color: $grey2;
      text-align: center;
      line-height: 16px;

      &.active {
        animation-duration: 1s;
        animation-name: blinkBackground;
        animation-iteration-count: infinite;
        animation-direction: alternate;
      }
    }
  }

  .pause-worker,
  .restart-worker {
    color: $queue-color;
  }

  .blocked-worker {
    color: $queue-color;
    cursor: default;
  }

  ul.request-cursor {
    float: none;
    margin-top: 10px;
    position: relative;

    li {
      font-size: 30px;
      height: 15px;
      display: flex;
      overflow: hidden;
      align-items: center;
      justify-content: center;
      color: $grey2;

      &.unfetchable {
        cursor: not-allowed;

        .dot {
          width: 8px;
          height: 8px;
          border: dashed 1px $white1;
          box-sizing: border-box;
          border-radius: 50%;
        }
      }

      &.mouseovered .empty-dot {
        width: 6px;
        height: 6px;
        border: solid 2px $live-value-foreground;
        border-radius: 50%;
      }

      &.active {
        color: $live-value-foreground;
      }

      .data {
        display: none;

        position: absolute;
        // 18px makes the right edge of the data container rub almost exactly (v. tiny overlap actually!)
        // with the left padding of the request cursor dot (when it's font-size 30px)
        right: 18px;
        top: 0;

        height: max-content;
        width: max-content;
        max-width: 300px;
        padding: $spacing-medium;

        background-color: $live-value-background;
        line-height: 15px;
        color: $live-value-foreground;
        font-size: 0.7rem;
        overflow-wrap: break-word;
        word-break: break-all;
        word-wrap: break-word;
        white-space: pre-wrap;
      }

      &.mouseovered .data {
        display: block;
      }
    }
  }
}
