.deployment-instance {
  width: 15px;
  height: 15px;
  margin: 1px;
  border: 1px solid;
  border-radius: 3px;

  &-running {
    background-color: $green-100;
    border-color: $green-400;

    &:hover {
      background-color: $green-300;
      border-color: $green-500;
    }
  }

  &-succeeded {
    background-color: $green-50;
    border-color: $green-400;
  }

  &-failed,
  &-unknown {
    background-color: $red-200;
    border-color: $red-500;
  }

  &-pending {
    background-color: $white-light;
    border-color: $border-color;
  }

  &.deployment-instance-canary {
    &::after {
      width: 7px;
      height: 7px;
      border: 1px solid $white-light;
      background-color: $orange-300;
      border-radius: 50%;
      content: '';
    }
  }
}
