.sui-prj-pipeline-job {
  z-index: 1;
  position: relative;
  min-width: rem(224);
  max-width: rem(440);
  background: $sui-color-brand-denim-100;
  box-shadow: $sui-shadow-300;
  border-radius: rem(6);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  transition: all 0.2s $sui-curve-easeInOutCubic;
  cursor: pointer;
  perspective: rem(1000);
  will-change: transform;

  &:hover,
  &:focus {
    transform: translateY(rem(-2)) scale(1.02);
    box-shadow: $sui-shadow-500;
  }

  & *::selection {
    background: transparent;
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: rem(6);
    border: rem(2) solid $sui-color-primary;
    transition: all 0.2s $sui-curve-easeInOutCubic;
    opacity: 0;
    z-index: 1;
  }

  &.as--focus {
    transform: translateY(rem(-4)) scale(1.03);
    box-shadow: $sui-shadow-600;

    &::after {
      opacity: 1;
    }
  }

  &.as--dragging {
    cursor: grabbing;
  }

  &.as--hideBorder {
    &::after {
      border: none;
    }
  }

  &__popper {
    z-index: 9999;
  }

  &__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
    overflow: auto;
    padding: $sui-space-sm;
    background: $sui-color-primary;
    border-radius: $sui-border-radius-xl;
    z-index: $sui-z-index-o-dropdown;
    box-shadow: $sui-shadow-600;

    > * {
      padding: 0 $sui-space-sm;

      @include suiButtonBase();
      @include suiButtonColor(
        $background: transparent,
        $color: white,
        $border-color: transparent,
        $background-hover: darken($sui-color-primary, 5%),
        $border-color-hover: transparent,
        $color-focus-effect: black
      );
      @include suiButtonSize($sui-space-xxs, $sui-space-sm);

      &[disabled] {
        pointer-events: none;
        opacity: 0.6;
      }
    }

    > * + * {
      border-left: $sui-size-border solid rgba(0, 0, 0, .1);
    }
  }

  &__status {
    padding: $sui-space-sm;
    border-radius: rem(6) rem(6) rem(0) rem(0);
    display: flex;
    align-items: center;
    font-size: $sui-font-size-xs;
    font-weight: 900;
    font-family: $sui-font-family-secondary;
    text-transform: uppercase;
    line-height: $sui-font-size-xs;
  }

  // -------------------------
  //    Colors Status
  // -------------------------

  &.as--awaiting &__status {
    @include prjStatusColor(
      $background: $sui-prj-color-status-awaiting-light,
      $color-as-text: $sui-prj-color-status-awaiting-dark
    );
  }

  &.as--unknown &__status {
    @include prjStatusColor(
      $background: $sui-prj-color-status-awaiting-light,
      $color-as-text: $sui-prj-color-status-awaiting-dark
    );
  }

  &.as--requested &__status {
    @include prjStatusColor(
      $background: $sui-prj-color-status-requested-light,
      $color-as-text: $sui-prj-color-status-requested-dark
    );
  }

  &.as--queued &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-queued-light,
      $color-as-text: $sui-prj-color-status-queued-dark
    );
  }

  &.as--running &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-running-light,
      $color-as-text: $sui-prj-color-status-running-dark
    );
  }

  &.as--succeeded &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-succeeded-light,
      $color-as-text: $sui-prj-color-status-succeeded-dark
    );
  }

  &.as--stopping &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-stopping-light,
      $color-as-text: $sui-prj-color-status-stopping-dark
    );
  }

  &.as--stopped &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-stopped-light,
      $color-as-text: $sui-prj-color-status-stopped-dark
    );
  }

  &.as--failed &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-failed-light,
      $color-as-text: $sui-prj-color-status-failed-dark
    );
  }

  &.as--out_of_memory &__status {
    @include prjStatusColor(
      $background: $sui-prj-color-status-out-of-memory,
      $color-as-text: $sui-prj-color-status-out-of-memory-light
    );
  }

  &.as--skipped &__status {
    @include prjStatusColor(
      $background:  $sui-prj-color-status-skipped-light,
      $color-as-text: $sui-prj-color-status-skipped-dark
    );
  }

  &__info {
    font-size: $sui-font-size-xxs;
    font-weight: bold;
    font-family: $sui-font-family-secondary;
    margin-left: auto;
  }

  &__anchor {
    margin-right: $sui-space-xs;

    svg {
      fill: currentColor;
    }
  }

  &__content {
    @include suiTransformFix();

    display: flex;
    align-items: flex-start;
    padding: $sui-space-md;
    text-decoration: none;
  }

  &__technology {
    flex: none;
    padding-left: rem(8);
  }

  &__details {
    margin-left: rem(8);
    overflow: hidden;
  }

  &__name {
    width: 100%;
    font-size: $sui-font-size-ms;
    font-weight: bold;
    color: $sui-color-brand-denim;
    font-family: $sui-color-text;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  &__type {
    font-size: $sui-font-size-xs;
    font-weight: bold;
    color: #8098b7;
    font-family: $sui-font-family-secondary;
  }

  @at-root {
    a#{&}:focus &__name,
    a#{&}.as--focus &__name {
      color: $sui-color-primary;
    }
  }
}