.sui-prj-instance-quickview {
  $this: &;

  position: relative;
  display: flex;
  width: 100%;
  border-radius: rem(14);
  z-index: $sui-z-index-t-app-layout-message;

  &.as--timeline {
    position: absolute;
    width: auto;
  }

  &.as--succeeded {
    background: $sui-prj-color-status-succeeded-light;

    #{$this}__item:not(:first-child) {
      padding: 0 rem(6) 0 0;
    }
  }

  &:not(.as--succeeded) {
    background: $sui-prj-color-status-awaiting-light;

    #{$this}__item + #{$this}__item {
      padding-left: rem(10);
      box-shadow: rem(-6) 0 0 0 currentColor;
    }
  }

  &.as--awaiting {
    background: $sui-prj-color-status-awaiting-light;
    justify-content: space-between;

    #{$this}__item {
      padding: 0 rem(6);
    }
  }

  &__awaitingItems {
    position: absolute;
    right: 0;
    transform: translateX(100%);
    display: flex;

    &::before {
      content: '';
      display: block;
      position: absolute;
      background: $sui-prj-color-status-awaiting-light;
      width: rem(12);
      height: 100%;
      transform: translateX(-50%);
    }
  }

  &__item {
    height: rem(14);
    width: auto;
    padding: 0 rem(6);
    border-radius: 0 rem(8) rem(8) 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    transition: all $sui-curve-easeInOutQuint 1s;

    &:first-child {
      border-radius: rem(8);
    }

    &.as--requested ~ &.as--awaiting,
    &.as--queued ~ &.as--awaiting,
    &.as--running ~ &.as--awaiting,
    &.as--failed ~ &.as--awaiting,
    &.as--stopping ~ &.as--awaiting,
    &.as--stopped ~ &.as--awaiting,
    &.as--unknown ~ &.as--awaiting {
      margin-left: auto;
    }

    &.as--failed ~ &.as--awaiting,
    &.as--stopped ~ &.as--awaiting,
    &.as--unknown ~ &.as--awaiting,
    &.as--failed ~ #{$this}__awaitingItems &.as--awaiting,
    &.as--stopped ~ #{$this}__awaitingItems &.as--awaiting,
    &.as--unknown ~ #{$this}__awaitingItems &.as--awaiting {
      color: lighten($sui-prj-color-status-awaiting-light, 6%);
      background-color: lighten($sui-prj-color-status-awaiting-light, 6%);

      & > * {
        opacity: 0.2;
      }
    }

    &.as--failed ~ #{$this}__awaitingItems,
    &.as--stopped ~ #{$this}__awaitingItems,
    &.as--unknown ~ #{$this}__awaitingItems {
      &::before {
        background-color: lighten($sui-prj-color-status-awaiting-light, 6%);
      }
    }

    &:not(.as--awaiting) + .as--awaiting {
      z-index: 2;
    }

    @extend %prjInstanceStatus;

    &.as--succeeded ~ .as--requested,
    &.as--succeeded ~ .as--queued,
    &.as--succeeded ~ .as--running,
    &.as--succeeded ~ .as--failed,
    &.as--succeeded ~ .as--stopping,
    &.as--succeeded ~ .as--stopped,
    &.as--succeeded ~ .as--unknown,
    &.as--requested:first-child,
    &.as--queued:first-child,
    &.as--running:first-child,
    &.as--stopping:first-child,
    &.as--failed:first-child,
    &.as--stopped:first-child,
    &.as--unknown:first-child {
      flex: 1;
    }
  }

  &__dot {
    @extend %prjInstanceDotStatus;

    position: relative;
    width: rem(6);
    height: rem(6);
    display: block;
    border-radius: rem(6);

    // Enlarge hover zone for tooltips
    &::after {
      content: '';
      position: absolute;
      top: rem(-5);
      right: rem(-5);
      left: rem(-5);
      bottom: rem(-5);
      background: transparent;
    }

    &.as--stack {
      width: rem(18);
    }
  }

  &__tooltip-content {
    display: flex;
    align-items: center;

    & > *:not(:last-child) {
      margin-right: $sui-space-xs;
    }

    & > *:last-child() {
      margin-left: auto;
    }

    &.as--stack:not(:last-child) {
      margin-bottom: $sui-space-xs;
    }
  }
}